我正在尝试将 React/Redux 应用程序的[无状态组件]中的选择填充为:
const FillSelect = ({team}) => <option value={team.onboardingOrder}>{team.name}</option>
const TeamSelector = ({teams}) => {
return (
<select>
<option value="">All</option>
{
teams ? (teams => teams.map(team => <FillSelect team={team} />)) : null
}
</select>
)
}
团队看起来像:{0:{id: 1, name: "Program Management", onboardingOrder: 0, …}, 1: {id: 2, name: "Value Capture", onboardingOrder: 1, …}…}
.
它返回一个错误:Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in select ...
发生这种情况是因为我正在使用 map()
?这样做的正确方法是什么?
最佳答案
你没有直接调用map;如果teams
是真的,你返回一个函数( teams => ...
)。您可能希望该行看起来像这样:
teams ? teams.map(team => <FillSelect team={team} />) : null
这将产生一个数组 <FillSelect />
的。
关于javascript - 使用 React.JS 选择 - 动态填充选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48522623/