Question

使用StackOverflow上的信息，我试图通过props将父函数传递给子组件；但是，这样做时我总是遇到错误。为了简化，这是我的父函数：

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      dailyPreloadMetrics: null,
      queryResults: [0,0],
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

   handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onClick(event) {
    const value = event.target.value;
    this.setState({isHidden: true});
    fetch('http://localhost:5000/kw-finder', {
      method: 'POST',
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
      body: JSON.stringify({'firstParam': event.target.value,
                            'secondParam' : 300000})
    }).then(response => {
        console.log(response)
        return response.json()
      })
      .then(json => {
        console.log(json)
        this.setState({queryResults: JSON.parse(json['query_results']),
                       dailyPreloadMetrics: JSON.parse(json['keyword_data']),
                       })
      })
  }


  render() {
    return (
      <div className="App">
      <QueryResultButtons data={this.state.queryResults}
                          onClick={this.onClick}
                          />
      </div>
    )
  }
}

export default App

“我的孩子”组件如下：

class DynamicButton extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      secondParam: this.props.audienceMax
      }
  }


  render() {
    const {
      data
    } = this.props
    const row = this.props.data && data.map((data) =>
        <Button style={{margin: "10px"}}
                value={data}
               onClick={e => this.props.onClick(e)}
                name='value'
                >
        </Button>

        )
    return (row)
  }
}

class QueryResultButtons extends React.Component {
  render() {
    return (
               <div>
                  <h1>Did you mean any of these instead?</h1>
                  <DynamicButton data={this.props.data && this.props.data}/>
              </div>
    )
}
}

export default QueryResultButtons

基本上，我正在尝试将功能-onClick-从父级传递到子级组件的两个级别（向下到DynamicButton子级组件）。但是，当我尝试执行此操作时，收到一条错误消息，指出：_this3.props.onClick不是函数。看来Child组件没有使用父函数，但不确定在这里我在做什么错...

Answer 1

当您插入QueryResultButtons组件时，您正在传递onClick函数，例如onClick={this.onClick}，但是当您调用DynamicButton时，您并未传递onClick函数：

<DynamicButton data={this.props.data && this.props.data}/>

尝试一下：

<DynamicButton data={this.props.data && this.props.data} onClick={this.props.onClick}/>

QueryResultButtons应该是：

class QueryResultButtons extends React.Component {
  render() {
    return (
               <div>
                  <h1>Did you mean any of these instead?</h1>
                  <DynamicButton data={this.props.data && this.props.data}
                                 onClick={this.props.onClick}
                  />
              </div>
    )
}
}

Answer 2

DynamicButton组件不是App组件的直接子代，而是孙子代。因此，您还必须将onClick函数从子组件（QueryResultButtons）传递给孙子组件（DynamicButton）。

因此，将您QueryResultButtons替换为：

class QueryResultButtons extends React.Component {
  render() {
    return (
      <div>
        <h1>Did you mean any of these instead?</h1>
        <DynamicButton
          data={this.props.data && this.props.data}
          onClick={this.props.onClick}
        />
      </div>
    );
  }
}

无法将父函数传递给子组件

2 个答案: