Question

我目前正在如此映射支柱：

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

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

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

在React中使用map（）传递附加参数

1 个答案: