react map方法-分别放置回调函数并发送参数

Question

据我所知，map方法采用了回调函数。 通常，您可以将函数放在map中：

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

但是在我的项目中，我将该函数称为一个单独的组件：

{ tabs.map( myFunction ) } 

这是myFunction组件：

const myFunction = (item) => {

    return(

        <Thing 
            key={item.value}
            label={item.label}
            value={item.value} 
        />
    );
}

地图中的“商品”似乎是自动传递的。

问题是我需要传递一个额外的变量-我该怎么做？ 这不起作用：

{ tabs.map( myFunction(myvariable) ) } 

也不：

{ tabs.map((styles) => myFunction ) } 

所以我不确定如何传递变量..并且仍然获得“ item”传递。

Answer 1

解决方法是：

{ tabs.map((tab) => myFunction(tab, myvariable)) }

另请注意

const myFunction = (item) => {

    return(

        <Thing 
            key={item.value}
            label={item.label}
            value={item.value} 
        />
    );
}

可以重构为

const myFunction = (item) => (
        <Thing 
            key={item.value}
            label={item.label}
            value={item.value} 
        />
);