作为 React prop 传递的函数没有出现在被调用的孩子中

Question

我有一个定义如下的 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>

    );
  }
}

Answer 1

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

Answer 2

官方文档说你应该将方法绑定到构造函数内的一个属性。 你可以在我的代码和盒子上玩下面的代码

constructor(props) {
    super(props);
    this.state = {
      exchanges: [
        {
          name: "binance",
          url: "https://bittrex.com"
        },
        {
          name: "bittrex",
          url: "https://bittrex.com"
        }
      ],
      selectedExchange: "binance"
    };
    // bind "this" to handleOnExchange method
    this.handleOnExchange = this.handleOnExchange.bind(this);
  }
  // method to be bound
  handleOnExchange (data) {
    this.setState({selectedExchange: data})
  }

  render() {
    const ExchangeList = props => <div />;
    const ExchangeDetail = props => <div />;
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList
          exchanges={this.state.exchanges}
          selected={this.state.selectedExchange}
          // pass the method to a child property (onExchangeSelect)
          onExchangeSelect={this.handleOnExchange}
        />
        <ExchangeDetail selectedExchange={this.state.selectedExchange} />
      </div>
    );
  }

要在（基于类的）子组件中使用它，请使用这样的 arg 调用该方法：

this.props.onExchangeSelect(arg)

Answer 3

它看不到它的原因是因为你在错误的地方寻找它。 您正在循环遍历“交换”道具以创建一个新组件，因此当您引用“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>

    );
  }
}