使用 array.map() 进行渲染答案

【问题标题】：Rendering Using an array.map()使用 array.map() 进行渲染
【发布时间】：2020-09-10 12:02:46
【问题描述】：

我对这个问题有疑问，我们知道 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>
    );
  }
}

【问题讨论】：

可能Lists and Keys 在 React 的文档中解释。尤其是Rendering Multiple Components 部分。
@norbitrial 您应该将其发布为答案。这个问题的答案应该是，“React 支持并理解这个用例的组件集合”

标签： javascript arrays reactjs jsx

【解决方案1】：

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

【讨论】：

【解决方案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>
     );
   }
 }

【讨论】：

强烈建议有钥匙，但这不是必须。没有它，代码仍然可以工作，只是很有可能出现错误。

【解决方案3】：

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

例如：网页输出

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

在 React 内部相当于下面的代码

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

这相当于用花括号将映射（返回数组）包裹起来。

【讨论】：

这不是真的。通过 babel 转译器运行它；这不是它的解释方式。 React 只理解集合。
请参考这篇博文。 reacttraining.com/blog/jsx-the-confusing-parts/#map-and-keys
我可以声称循环 React.createElement("li") 也“内部相等”。 babeljs.io/… 它们不会生成相同的代码或执行路径。
实际上链接的文章比您声称的要准确一些。至少它有一些道理。但是这个：“所以，它将是用花括号包裹的子元素数组，使它们内联。”这是完全和绝对错误的。这不是 JSX 转译的工作方式。