javascript - react : passing parameters to a function in map

Question

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

每行由一个映射函数生成:

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

您必须稍微修改一下操作。尝试按照以下方式进行操作。

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

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