Question

我有一个如下定义的React组件呈现方法，其中包括将名为onExchangeSelect的prop传递给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的prop我可以调用它。

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

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>

    );
  }
}

Answer 1

我会在dev工具中检查它们而不是console.log ... place break point并检查chrome dev工具.. onExchangeSelect应该作为子组件中的props的一部分提供..

Answer 2

offical docs说您应该将方法绑定到构造函数内部的属性。您可以在我的codesandbox上浏览以下代码

this.props.onExchangeSelect(arg)

要在（基于类的）子组件中使用它，请使用如下所示的arg调用该方法：

melt()

Answer 3

它看不到的原因是你找错了地方。您正在循环遍历 "exchange" 道具以创建一个新组件，因此当您引用 "this.props.onExchangeSelect" 时，您不是在引用传递给按照您的预期进行类，但到您正在循环的交换对象。

为了解决这个问题，可以考虑像这样重写 ExchangeContainer 组件：

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

  }

    setSelectedExchange = (selectedExchange) =>{
        this.setState({selectedExchange})
    };

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

还有像这样的 ExchangeList 组件：

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

         this.state = {
         };

       }

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

      const {exchanges, selected, onExchangeSelect} = this.props;

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


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

    );
  }
}

函数传递，因为React prop没有出现在被调用的子节点中

3 个答案: