使用 RenderRow 向函数添加更多参数 (Onsen-UI)

Question

所以我有一个列表，当前调用一个函数来生成 ListItems，但我想向它传递更多信息。

<List
  dataSource={this.state.addedArry}
  renderRow={this.renderList}
/>

来电

  renderList = (user, index) => {
    return (
      <ListItem key={user.key}>
        <div className='left'>
          <img src={`https://robohash.org/${user.key}`} alt={""} className='list-item__thumbnail' />
        </div>
        <div className='center'>
          {user.name}
        </div>
        <div className='right'>
          <Button onClick={() => this.clickedRemoveEventHandler(user, index, this.state.userArry, this.state.addedArry)}>Remove</Button>
        </div>
      </ListItem>
    );
  }

我希望有一种方法可以将不同的数据传递给它，比如 this.state.userArry 之类的。

因此最终调用将类似于：

renderList = (user, index, inputArry, outoutArry) => { ... }

我试过 renderRow={this.renderList(var1, var2)} 之类的东西，但它们没有用，我认为这与底层地图功能有关

任何帮助都会很棒！

Answer 1

renderRow={(event) => {this.renderList(event, user, index, inputArry, outoutArry)}}

这样做，它将允许您将 n 个参数发送到 renderRow

Answer 2

通常情况下，您只需通过 props 或状态（即 this.props.inputArray）访问额外信息。但是，如果你真的想传递更多的参数，有以下几种方式：

预先绑定函数以提供默认参数：renderList = renderList.bind(this, inputArray, outputArray);。然后，renderList 将得到 4 个参数：renderList(inputArray, outputArray, data, index) { ... }
正在绑定函数 "in place"：renderRow={renderList.bind(this, inputArray, outputArray)}。与之前案例相同的参数。
用匿名函数重定向参数：renderRow={(data, index) => renderList(data, index, inputArray, outputArray)}

使用 RenderRow 向函数添加更多参数 (Onsen-UI)

Adding more paramaters to a function with RenderRow (Onsen-UI)

javascript

reactjs

onsen-ui