反应我想在多个标签而不是一个标签中输出数组

Question

我们现在已将 json array 数据放入 functionSupplement 变量中。如果你打印这个<p>functionSupplement </p>，你会得到这样的东西。

我如何编写代码才能让它按照我想要的方式工作？

<p>
"Hi" 
"Hi"
</p>

我想做成这样

<p>
"Hi"
</p>
<p>
"Hi"
</p>

这是我的代码。

let functionSupplement = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo.map(array => array.ingredientsInfo?.[0].mFunctionalDisplayText);

console.log(functionSupplement) // (2) ["Hi","Hi]
   
return (
          <div>
          <p>{functionSupplement}</p>  //<p>"Hi" "Hi"</p>
          </div>
)

Answer 1

只要是 .map() 就可以迭代，实现了代码的可重用性，

{functionSupplement.map(e=><p>{e}</p>)}

Answer 2

您可以像这样使用 .map 属性 :

let functionSupplement = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo.map(array => array.ingredientsInfo?.[0].mFunctionalDisplayText);

console.log(functionSupplement) // (2) ["Hi","Hi]

    return (
        <div>
          {functionSupplement.map(item=> <p>{item}</p>)}
        </div>
    )
}

Answer 3

render() {
    return <div>
    {
        functionSupplement.map((mgs) =><p>{mgs}</p>)
    }
    </div>;
}

Answer 4

如果您不需要像其他答案中那样的 <div>，<React.Fragment /> (or <> and </>) comes to your rescue (which renders as DocumentFragment):

render() {
    return <React.Fragment>
        {functionSupplement.map((mgs) =><p>{mgs}</p>)}
    </React.Fragment>;
}

Answer 5

带换行符的字符串 `/n`

我假设您只是希望您的内容出现在不同的行上。

您可以使用 <pre> 标签按原样呈现内容。

const content = `this is line 1
this is line 2
this is line 3`


class Snippet extends React.Component {
   render() {
      return (<div><pre>{ content }</pre></div>)
   }
}


ReactDOM.render(
  <Snippet />,
  document.body
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

数组

如果您正在渲染一个数组，您还可以使用 .map 循环遍历该数组。

const content = ['this is line 1','this is line 2','this is line 3']


class Snippet extends React.Component {
   render() {
      return (<div>{ content.map( (x,i) => <p key={i}>{x}</p>) }</div>)
   }
}


ReactDOM.render(
  <Snippet />,
  document.body
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 6

您需要使用列表中的 map。

有关详细信息，请参阅：https://reactjs.org/docs/lists-and-keys.html

这是一个基于您的代码的工作示例：

<!DOCTYPE html>
<html>

  <body>

    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
    'use strict';

    let functionSupplement = ["hi", "hello"];
    
    const paragraphs = functionSupplement.map((item) =>
      <p key={item}>{item}</p>
    );

    ReactDOM.render(paragraphs,document.getElementById('root'));
</script>

  </body>
</html>

反应我想在多个标签而不是一个标签中输出数组

react I want to output the array in multiple tags rather than one tag

javascript

arrays

ecmascript-6

reactjs

带换行符的字符串 `/n`

数组

反应我想在多个标签而不是一个标签中输出数组

react I want to output the array in multiple tags rather than one tag

javascript

arrays

ecmascript-6

reactjs

带换行符的字符串 /n

数组

带换行符的字符串 `/n`