当我在JSX的render中使用方法调用时，为什么我的道具为null？

Question

我有一个具有子File组件的FileList组件。 这工作正常：

<tbody id="documents">
    {files.map((file, i) => {
      return (
        <File
          key={i}
          id={file.id}
          name={file.name}
          path={file.path_lower}
          tags={file.tags || []}
          />
        );
      })}
</tbody>

然后，当我在玩耍时，我做了一些修改，由于某种原因，它不起作用（我收到了一个js错误，指示未在文件上设置道具）。 本质上，tbody中的代码被提取到一个辅助方法中。 我的直觉是它与“ this”有关，但是在两种情况下，我都在同一个“ files”变量上操作，所以对我来说这没有意义。

我很好奇为什么-有人知道吗？

这是更新的代码：

render() {

    const files = this.state.files;
    const elementsHtml = files.map((file, index) => {
        return (
        <File>
          key={index}
          id={file.id}
          name={file.name}
          path={file.path_lower}
        </File>
        );
});

return (
  <table>
    <thead>          
        <th key="name">
          Title
        </th>
        <th alignleft="false" key="tag">
          Categories
        </th>
    </thead>
    <tbody id="documents">
      { elementsHtml }
    </tbody>
  </table>
)}}

Answer 1

在最后一个示例中，您使File组件错误。 您没有向其传递道具，而是将其与一些孩子一起渲染。 看到：

<File>
...
name={file.name}
...
</File>

不

<File ... name={file.name}... />

因此，像这样更改它：

    <File
      key={index}
      id={file.id}
      name={file.name}
      path={file.path_lower}
    />

另外，请避免将索引用作键。 您在那里有一个文件ID，将其用作密钥。