如何在Javascript / React中拆分列表项的文本?

Bridler Shoc

感谢您抽出宝贵的时间阅读我的问题!很可能我提出的问题是错误的,非常抱歉让您感到困惑。对于某些人来说,这可能也是一个基本的Javascript问题,但我无法解决。我将尽力解释自己在做什么。

我的数据如下所示:

{
    "data": {
      "textvulnerabilities": [
        {
          "countryname": "Timor-Leste",
          "impacts": "Increase in rainfall intensity may lead to increase in flood occurrence in new areas.\n\tIncrease in floods may lead to extensive damage to existing water infrastructures and roads.\n\tIncrease in flood and drought occurrence will lead to exacerbation of current food security problems.\n\tAs a consequence of increased precipitation and extreme events, increase in landslides, wild fires, and deforestation will occur.\n\tIncreased rain variability and drought occurrence will lead to extended incidence of pest and crop diseases, as well as vector-borne diseases and increase in coastal vulnerability.",
          "hazardid": 242
        },
        {
          "countryname": "Tonga",
          "impacts": "A current lack of effective or efficient water storage infrastructure endangers agricultural production and water quality and quantity for human consumption in Tonga. The likelihood of increased sedimentation and salt water intrusion under future sea level rise and extended drought conditions could cripple existing water infrastructure.\n\tHurricane-strength cyclones, or those with winds stronger than 63 knots or 117 km/hr, have increased systematically in the southwest Pacific and the region now experiences on average four hurricane-strength cyclones a year. Increased cyclone intensity under possibly future climate change remains a matter of debate among the climate science community, however likely trends of drier and warmer climate and an increase in sea surface temperatures these disasters are likely to increase.\n\tA general increase in tropical cyclone intensity (lower central pressures, stronger winds and higher peak and mean precipitation intensities) appears likely, as does an eastward extension in the area of formation. Early Warning Systems need to be expanded and improved and better climate modeling available to prepare for impending storms and their correlative effects.\n\tFuture climate is expected to become more El-Nino like, resulting in more droughts in the southern Pacific and more rain and consequent floods in the equatorial Pacific and Cyclones are expected to increase in intensity by about 520 percent. Risk management of natural hazards (RMNH) such as Planting mangroves to stabilize land against erosion and managing.\n\tExpected sea level rise may completely inundate the villages of Villages of Kanokupolu-Haakili-Ahau, Nukuleka-Talafoou-Navutoka-Manuka and all the areas East of Sopu and Siesia at Nukunukumotu Island and Atata Island. A long lasting and effective foreshore protection seawall similar to the present Nukualofa foreshore protection would minimize and flooding in these and other low-lying areas.",
          "hazardid": 245
        },
      ]
    }
  }

我的数据库包含大约251个国家,并且我像这样遍历每个国家:

const CountryHazardText = ({ hazardid }) => {
  const { data, loading, error } = useQuery(GET_HAZARD_TEXT, {
    variables: { hazardid: hazardid },
  });

  const initialCountry = data ? data.textvulnerabilities : [];
  const singleCountry = initialCountry;
  {
    return (
      <div>
        {singleCountry ? (
          singleCountry.map((country, index) => {
            return (
              <div key={index}>
                <p>{country.impacts}</p>
              </div>
            );
          })
        ) : (
          <h6>No impacts found</h6>
        )}
      </div>
    );
  }
};

哪个工作正常。但是如您所见,影响很大,用户难以阅读。幸运的是,对象内部有一个“ \ n”,因此我假设以此为基础,我将能够创建一个for循环,只要遇到“ \ n”,它将在文本之外创建一个ListItem,正确的?

我试着制定这个公式,但是就这么接近了,然后我脑子里的逻辑就破了:

 {country.impacts ? (country.impacts.map ((impact, index) => 
          {
            return (
              // For every encounter with a "\n " inside country.impacts create a new listitem: 
              <ul>
                <li> </li>
              </ul>
            )

          })}

这是不正确的,但是我不知道该怎么做。如果有人能解释我在做什么的确切术语也很好。据我了解,我正在尝试将项目的内容映射到数组中,对吗?

非常感谢您在这里!

布里德勒

德鲁·里斯(Drew Reese)

您将需要标签拆分和映射impacts字符串然后按拆分,将结果数组映射到列表项。ul"\n\t"

{country.impacts && (
  <ul>
    {country.impacts.split("\n\t").map((impact, index) => (
      <li key={index}>{impact}</li>
    ))}
  </ul>
}

const impacts = "Increase in rainfall intensity may lead to increase in flood occurrence in new areas.\n\tIncrease in floods may lead to extensive damage to existing water infrastructures and roads.\n\tIncrease in flood and drought occurrence will lead to exacerbation of current food security problems.\n\tAs a consequence of increased precipitation and extreme events, increase in landslides, wild fires, and deforestation will occur.\n\tIncreased rain variability and drought occurrence will lead to extended incidence of pest and crop diseases, as well as vector-borne diseases and increase in coastal vulnerability."

const result = impacts.split("\n\t").map((impact, index) => (
  `<li key=${index}>${impact}</li>`
));

console.log(result);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章