javascript - React-Native 将循环结果累积到单个字符串

Question

我想提取标签之间的数据，并根据内容返回 <View><Text>This is a Text</Text></View>或<View><Text>This is a Picture</Text></View>

问题是我不知道如何将匹配结果累积到Article中，然后返回{Article}作为最终结果。

在下面的情况下，我应该最终得到该渲染:

<View><Text>This is a Text</Text></View>
<View><Text>This is a Picture</Text></View>
<View><Text>This is a Text</Text></View>

相反，我得到了最终结果。我试过Article = Article + <View><Text>This is a Text</Text></View>和Article += <View><Text>This is a Text</Text></View>但他们都失败了。

export default class App extends React.Component {
  render() {

let pattern = /<RNVW>(.*?)<\/RNVW>/g;
let str =   '<RNVW><p>Markets are mixed in Asia, with Japan\'s benchmark slipping 0.7% after the government reported the economy contracted in the last quarter</em></p><p>BANGKOK -- Markets were mixed in Asia on Monday, with Japan\'s benchmark slipping 0.7% after the government reported the economy contracted 6.3% in annual terms in the last quarter. China\'s shares got a boost after the central bank stepped in to help the economy with a rate cut, extra buying of securities and tax cuts. </p><p>The Nikkei 225 in Tokyo closed at 23,523.24, while Sydney\'s S&P ASX/200 edged 1% lower to 7,125.10.</p></RNVW><RNVW><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/04/1493235373large_react_apps_A-01.png"></RNVW><RNVW><p>Such moves will likely be followed by still more, said Julian Evans-Pritchard, given that many of the companies worst affected by the virus outbreak are smaller ones that lack access to loans from major state-run banks. </p><p>The government has also announced plans for tax cuts and other measures to help companies struggling with shut-downs of cities and plunging consumer spending and travel. </p><p>"We think the PBOC will need to expand its re-lending quotas and relax constraints on shadow banking in order to direct more credit to struggling SMEs," Evans-Pritchard said in a commentary. </p><p>Wall Street closed out a wobbly day of trading Friday with the major stock indexes notching their second straight weekly gain. Though trading was mostly subdued and cautious following China\'s report Thursday of a surge in cases of a new virus that raised fresh concerns about global economic growth.</p></RNVW>';

    let match;
    let Article; 
    while ((match = pattern.exec(str)) !== null) {
      if (match[1].startsWith("<p>") !== false) {
       Article = (
        <View><Text>This is a Text</Text></View>
        );
      } else {
      Article = (
           <View><Text>This is a Picture</Text></View>
        );
      }
    }

    return (
      <View style={styles.container}>
     {Article}
      </View>
    );
  }
}

Answer 1

嘿文森特

您在 Article 上犯了一个错误，您每次都尝试向 Article 分配一个新项目，您应该使用 array> 并每次在数组中推送新项目。

对代码进行了一些更改:

class App extends Component {

articleView = () => {

let pattern = /<RNVW>(.*?)<\/RNVW>/g;
let str ="<RNVW><p>Markets are mixed in Asia, with Japan's benchmark slipping 0.7% after the government reported the economy contracted in the last quarter</em></p><p>BANGKOK -- Markets were mixed in Asia on Monday, with Japan's benchmark slipping 0.7% after the government reported the economy contracted 6.3% in annual terms in the last quarter. China's shares got a boost after the central bank stepped in to help the economy with a rate cut, extra buying of securities and tax cuts. </p><p>The Nikkei 225 in Tokyo closed at 23,523.24, while Sydney's S&P ASX/200 edged 1% lower to 7,125.10.</p></RNVW><RNVW><img src=\"https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/04/1493235373large_react_apps_A-01.png\"></RNVW><RNVW><p>Such moves will likely be followed by still more, said Julian Evans-Pritchard, given that many of the companies worst affected by the virus outbreak are smaller ones that lack access to loans from major state-run banks. </p><p>The government has also announced plans for tax cuts and other measures to help companies struggling with shut-downs of cities and plunging consumer spending and travel. </p><p>\"We think the PBOC will need to expand its re-lending quotas and relax constraints on shadow banking in order to direct more credit to struggling SMEs,\" Evans-Pritchard said in a commentary. </p><p>Wall Street closed out a wobbly day of trading Friday with the major stock indexes notching their second straight weekly gain. Though trading was mostly subdued and cautious following China's report Thursday of a surge in cases of a new virus that raised fresh concerns about global economic growth.</p></RNVW>";

let match;
let Article = [];
while ((match = pattern.exec(str)) !== null) {
  if (match[1].startsWith("<p>") !== false) {
    Article.push(
      <View>
        <Text>This is a Text</Text>
      </View>
    );
  } else {
    Article.push(
      <View>
        <Text>This is a Picture</Text>
      </View>
    );
  }
}
return Article;

};
render() {
  return (
   <View>
    {this.articleView()}
  </View>
  );
 }
}

它会给你想要的输出:)

我希望这就是您正在寻找的!

谢谢!