将值从 map 函数传递到 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 的检查工作正常（返回 true 或 false）但我无法在 map 函数之外访问 showBtn。显然地图正在检查各种值，所以有些值是真的，有些是假的，所以保持地图语法很重要。如有任何建议，我们将不胜感激！

Answer 1

您可以 return 一个布尔值数组，指示您的条件在哪个索引上 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} />
))}

将值从 map 函数传递到 React 组件

Passing value from a map function to a React component

javascript

reactjs

map-function