时间戳

首页 > 解决方案 > 作为 React 道具传递的函数未出现在被调用的子项中

reactjs - 作为 React 道具传递的函数未出现在被调用的子项中

问题描述

我有一个定义如下的 React 组件渲染方法，其中包括将一个名为 onExchangeSelect 的道具传递到 ExchangeList 组件中。

  render() {
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList
            exchanges={this.state.exchanges} selected={this.state.selectedExchange}
            onExchangeSelect={selectedExchange => this.setState({selectedExchange})}
        />
        <ExchangeDetail exchange={this.state.selectedExchange} />
      </div>
    );
  }

然后，在 ExchangeList 构造函数中，当我 console.log this.props 时，没有我可以调用的名为 onExchangeSelect 的道具。

目的是将顶层组件的回调函数传递给子组件，由子组件调用以影响父组件的状态。整个顶级类如下：

class ExchangeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      exchanges:[
        {
          name:"binance",
          url:"https://bittrex.com"
        },
        {
          name:"bittrex",
          url:"https://bittrex.com"
        }
      ],
      selectedExchange:"binance"
    };

  }

  render() {
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList
            exchanges={this.state.exchanges} selected={this.state.selectedExchange}
            onExchangeSelect={selectedExchange => this.setState({selectedExchange})}
        />
        <ExchangeDetail exchange={this.state.selectedExchange} />
      </div>
    );
  }
}

为什么该功能不能作为子组件中的道具使用？（以下）：

class ExchangeList extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };

    console.log('This props ' + JSON.stringify(this.props))
  }

  render() {
    console.log("EL: " + JSON.stringify(this.props))

      const ExItemList = this.props.exchanges.map((exchange) => {
        return  <ExchangeListItem key={exchange.name} exchange={exchange}
                                  onExchangeSelect={this.props.onExchangeSelect}/>
      });


    return (
      <ul className="col-md-4 list-group bg-light" >
        {ExItemList}
      </ul>

    );
  }
}

标签： reactjsecmascript-6

解决方案

我会在开发工具中检查它们而不是 console.log..place 断点并检查 chrome 开发工具.. onExchangeSelect 应该作为子组件中道具的一部分提供..

推荐阅读