Reactjs 不确定如何使用父状态和子组件重新呈现页面

我正在尝试传递一个事件处理程序，以便在被单击时重新呈现整个其他组件，但无法确定如何将其传递给子组件并使其实际工作

我尝试过以不同的方式传递事件处理程序，并将应用程序组件作为一个带有钩子的函数来编写

App.js：

constructor(props) {
    super(props);

    this.state = {
      clicked: false,
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      clicked: true,
    })
  }

  renderLoad(handleClick) {
    return <Load handle={() => handleClick}/>
  }

  renderQuiz () {
    return <Quiz />
  }

  render () {
    return (
    <div className='main'>
    {this.state.clicked ? this.renderQuiz() : this.renderLoad()}
    </div>

构造函数（道具）{
超级（道具）；
此.state={
点击：错，
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
这是我的国家({
对,，
})
}
渲染加载（handleClick）{
返回handleClick}/>
}
renderquick（）{
返回
}
渲染（）{
返回(
{this.state.clicked？this.renderquick（）：this.renderLoad（）}

Load.js

function Load(props) {
    return <button onClick={() => props.handle}>Let's get started</button>
}

功能加载（道具）{
return props.handle}>让我们开始吧
}

点击按钮后，应用程序组件应根据状态为真来呈现测验。

你已经非常接近了

需要注意的是，当引用同一组件中的函数时，请使用this.myFunction。不需要匿名函数调用（）=>

因此：

//不起作用
handleClick}/>
//工作
//不起作用
onClick={（）=>props.handle}
//工作
onClick={props.handle}

这里有一个工作沙箱供参考：

你很接近了

需要注意的是，当引用同一组件中的函数时，请使用this.myFunction。不需要匿名函数调用（）=>

因此：

//不起作用
handleClick}/>
//工作
//不起作用
onClick={（）=>props.handle}
//工作
onClick={props.handle}

---

这里有一个工作沙盒供参考：

为什么要重新渲染？预期结果是什么？为什么要重新渲染？预期结果是什么？非常感谢！这肯定会消除我对如何引用函数的困惑。您可以接受此解决方案并进行升级表决，以便其他人更容易找到它。谢谢太多了！这绝对消除了我对如何引用函数的困惑。你可以接受这一点作为解决方案，并向上投票，这样其他人可能会更容易找到它。

//doesn't work
<Load handle={() => handleClick}/>

//works
<Load handle={this.handleClick}/>

//doesn't work
onClick={() => props.handle}

//works
onClick={props.handle}