在 React 中使用 map() 传递附加参数答案

【问题标题】：Passing Additional Arguments with map() in React在 React 中使用 map() 传递附加参数
【发布时间】：2017-01-04 08:16:52
【问题描述】：

我目前正在像这样映射道具：

  renderList(item) {
      return(
        </div>
          shows up
        </div>
    )
  }

  render() { 
    return(
        <div> 
          {this.props.items.map(this.renderList)}
        </div>
    );
  }
}

我想传递另一个道具

this.props.completed

我想做的简化版

  renderList(item, completed) {
      return(
        </div>
          shows up
        </div>
    )
  }

  render() { 
    return(
        <div> 
          {this.props.items.map(this.renderList(this.props.items, this.props.completed)}
        </div>
    );
  }
}

是否可以使用此地图功能传递另一个道具？

【问题讨论】：

您能否提供更多有关您正在尝试做的事情的背景信息，我不清楚。你能添加更多代码吗？
@AhmedHawas 我添加了更多代码希望它有意义

标签： javascript reactjs parameters arguments prop

【解决方案1】：

（至少）有 3 种方法可以解决这个问题。最简单的方法是将renderList 绑定到您的组件实例并在其中引用this.props.completed：

constructor (props) {
    super(props);
    // it's more efficient to bind your functions once in the constructor than
    // doing so on every render
    this.renderList = this.renderList.bind(this);
  }

  renderList(item) {
      const completed = this.props.completed;
      return(
        <div>
          shows up
        </div>
    )
  }

  render() { 
    return(
        <div> 
          {this.props.items.map(this.renderList)}
        </div>
    );
  }

另一种选择是使用闭包将属性传递给函数：

  renderList(completed, item) {
      return(
        <div>
          shows up
        </div>
    )
  }

  render() { 
    const completed = this.props.completed;
    const renderList = this.renderList;
    return(
        <div> 
          {this.props.items.map(function (item) {
             return renderList(completed, item);
          })}
        </div>
    );
  }

第三种选择是将属性绑定到map() 回调。

  renderList(completed, item) {
      return(
        <div>
          shows up
        </div>
    )
  }

  render() {
    return(
        <div> 
          {this.props.items.map(this.renderList.bind(this, this.props.completed))}
        </div>
    );
  }

【讨论】：