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

Passing Additional Arguments with map() in React

本文关键字：参数 React map      更新时间：2023-09-26

我目前正在映射一个像这样的道具:

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

是否可以传递另一个道具与这个地图功能?

有(至少)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>
    );
  }
相关文章：