React：将参数传递给地图中的函数

Question

我正在构建一个组件，该组件使用 MaterialDesign 的表在 React 中显示用户数组。

每一行都由一个 map 函数生成：

let actions = this.props.rowButtons;
...
{this.props.tableData.map( (val, index) => (
                       <TableRow key={index}>
                         <TableRowColumn >{index}</TableRowColumn>
                         <TableRowColumn >{val.firstName}</TableRowColumn>
                         <TableRowColumn >{val.lastName}</TableRowColumn>
                         <TableRowColumn >{val.email}</TableRowColumn>
                         <TableRowColumn >
                            <ActionButtons actions={actions}/>
                         </TableRowColumn>
                       </TableRow>
))}

<ActionButtons> 组件创建一个或多个按钮，并将对象数组作为参数，例如[{type: string, onClick: function}, {type: string, onClick: function}, ... ]（数组中每个对象一个按钮）； 父组件在 this.props.rowButtons 中发送这样一个数组。

我想将 val 作为参数传递给每个 onClick 函数以获得类似

actions = [{type: "personButton", onClick: onClick(val)}, {type: '', onclick: someOtherfunction(val)}]; 

Answer 1

您必须稍微修改actions。试试下面的方法。

modifyActions = (actions, val) => {
  return actions.map((a) => {
      return Object.assign({}, a, {onClick: () => a.onClick(val)})
  })
}

<ActionButtons actions={this.modifyActions(actions, val)})}/>