Question

我对此问题有疑问，我们知道arr.map（）总是返回一个数组，然后我们将如何精确地使用此代码在此渲染元素。

class Messages extends React.Component {
  render() {
    const msgs = [
      {id: 1, text: "Greetings!"},
      {id: 2, text: "Goodbye!"},
    ];

    return (
      <ul>
        { msgs.map(m => <li>{m.text}</li>) }
      </ul>
    );
  }
}

Answer 1

默认情况下，React可以呈现strings，numbers和arrays。 undefined和null数据类型将呈现为空字符串，而react无法呈现object。在您的情况下，默认情况下，您是根据msgs object和react创建的新数组知道如何在数组中呈现值。因此，您会在屏幕上看到正确呈现的结果。这种能力与React的内部运作有关。

Answer 2

您的商品列表必须具有唯一的密钥，最好的方法是使用商品ID。

 class Messages extends React.Component {
   render() {
     const msgs = [
       {id: 1, text: "Greetings!"},
       {id: 2, text: "Goodbye!"},
     ];

     return (
       <ul>
         { msgs.map(m => <li key={m.id}>{m.text}</li>) }
       </ul>
     );
   }
 }

如果元素列表没有ID，则可以使用不变的索引。

 class Messages extends React.Component {
   render() {
     const msgs = [
       {id: 1, text: "Greetings!"},
       {id: 2, text: "Goodbye!"},
     ];

     return (
       <ul>
         { msgs.map((m, i) => <li key={i}>{m.text}</li>) }
       </ul>
     );
   }
 }

Answer 3

React在内部将所有子元素作为父元素的子道具。因此，它将是包裹在花括号下的子元素数组，这些花括号使它们内联。

例如：网页输出

<ul>
   <li>Greetings</li>
   <li>Goodbye!</li>
</ul>

React内部等于下面的代码

<ul>
   {
     [ <li>Greetings</li>, <li>Goodbye!</li> ]
   }
</ul>

相当于将地图（返回数组）用大括号括起来。

使用array.map（）渲染

3 个答案: