javascript - 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} 
        />
    );
}

map 上的“项目”似乎是自动传递的。

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

{ tabs.map( myFunction(myvariable) ) } 

也不:

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

所以我不确定如何传递变量......并且仍然可以传递“项目”。

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} 
        />
);