如何将map函数中计算的showBtn值传递给React的ListComponent组件

你只需在第一个map遍历阶段，将计算得到的showBtn挂载到返回的option对象上即可，不需要调整现有map的结构，具体修改如下：

第一步：修改listOptions生成逻辑 #

如果你的option是普通可编辑JS对象，直接挂载属性即可：

const listOptions = list.actionCollection
  .map((option) => {
    const showBtn = option.has(RENDER_BTN);
    // 把计算结果挂载到option上
    option.showBtn = showBtn;
    return option;
  });

如果option是不可变对象（不允许直接修改原对象），返回合并属性后的新对象即可：

const listOptions = list.actionCollection
  .map((option) => {
    const showBtn = option.has(RENDER_BTN);
    // 用展开运算符合并原有属性和新增的showBtn
    return { ...option, showBtn };
  });

第二步：组件传递取值 #

现在你可以在渲染时直接从每个option里拿到对应showBtn值，两种使用方式可选：

1. 不修改传参结构，直接在组件内通过props.option.showBtn读取：

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

2. 单独作为props传递给组件：

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

内容的提问来源于stack exchange，提问作者cts