将值从映射函数传递给React组件

Question

我有点不确定如何将值showBtn传递给我的<ListComponent />>

代码如下:

const listOptions = list.actionCollection
.map((option) => {
const showBtn = option.has(RENDER_BTN);
// tried to assign showBtn to a value that could be passed to component below
return option;
});

{listOptions.map((option) => (
<ListComponent option={option} key={option.key} />
))}

我对showBtn的检查工作正常(返回真或假)，但我无法访问地图功能之外的showBtn。很明显，地图会检查不同的值所以有些值为真&其他为假，因此保持映射语法很重要。任何建议将不胜感激!

Answer 1

您可以返回一个布尔值数组，指示您的条件是在哪个索引上true/false:

const listOptions = list.actionCollection
.map((option) => ( //Implicit return
const showBtn = option.has(RENDER_BTN);
));

listOptions看起来像:[true, false, false, true...]

可以在jsx中使用:

{list.actionCollection.map((option, index) => (
listOptions[index] && <ListComponent option={option} key={option.key} />
))}

,或者简单:

{list.actionCollection.map((option, index) => (
option.has('RENDER_BTN') && <ListComponent option={option} key={option.key} />
))}