Question

说我有一个组件，Todo。它需要道具 title 和 dueDate。在容器组件中，我可能会像这样映射一些 todo：

todos = [
  { title: "Read a book", dueDate: new Date() }
  // etc...
]

// ... later in the code ...

todos.map(x => <Todo title={x.title} dueDate={x.dueDate} />)

但是，我当然也可以这样做：

todos.map(Todo)

为了同样的结果？

我没有在任何教程或任何内容中看到过这种情况，所以我想知道这种方法而不是冗长的替代方法有什么问题。

Answer 1

<块引用>

但是，我当然也可以这样做：

todos.map(Todo)

不，那是两种不同的东西。 .map(x => <Todo title={x.title} dueDate={x.dueDate}/>) 调用 React.createElement 来创建 Todo，但只是 .map(Todo) 直接调用 Todo。

您需要创建元素，而不仅仅是调用函数。这些是根本不同的东西。 <Todo ... /> 根本不调用 Todo，它只是调用 React.createElement，它会记住 Todo 函数并在必要时调用它。这不会调用 Todo，例如：

// Doesn't call `Todo`, just remembers it
const el = <Todo title={x.title} dueDate={x.dueDate}/>;

稍后，如果我们在另一个组件中使用 el 或与 ReactDOM.render 或类似组件一起使用，则 Todo 将根据需要被调用。

<块引用>

...而不是冗长的替代方案。

如果您正在寻找更简洁的内容，as jonrsharpe pointed out，您可以.map(x => <Todo {...x}/>)

将反应功能组件传递给 .map() 有什么问题？

1 个答案: