时间戳

首页 > 解决方案 > 因此返回一个 JSX 必然会使函数成为一个组件？

javascript - 因此返回一个 JSX 必然会使函数成为一个组件？

问题描述

我有简单的代码，我有一个名为 Feed 的组件，其中包含一些道具。

在名为 Articles 的主要内容组件上，我通过 js 对象映射并返回 Feed 组件

现在，每个人都在使用匿名函数来做到这一点。

<div>
{data.map(()=> <Feed/>))} (sorry if the syntax a bit wrong but you get the idea
</div>

现在，我采用了在 map 函数之外返回 Feed 的函数

function createFeed (feedData) {
   return <Feed props/>
}

并把它

<div>
{data.map(createFeed)} 
</div>

它的工作原理很奇怪，但是，因此 createFeed 也是一个组件（所以我需要将名称更改为 CreateFeed）或者这只是一个将对象返回到由 map 函数创建的新数组的函数，因此它只是一个函数而不是一个组件？

标签： javascriptreactjscomponentsjsx

解决方案

这里没有魔法。

<div>{data.map(createFeed)}</div>

相当于：

<div>{ data.map(item => createFeed(item) }</div>

由于该createFeed函数在没有添加任何逻辑的情况下返回组件，因此您可以省略它并返回组件。这都一样。

编辑：

在您的情况下，您只是将函数用作工厂，而不是功能组件，因此您可以争辩说它不需要大写。

也就是说，如果您确定不会将该函数用作 Jsx 中的组件，那么这不是问题。如果你想将它用作 Jsx，这会导致一个问题，记录在这里：https ://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

如果工厂功能没有用，我会省略它，但最终选择取决于您。

推荐阅读