React 父组件将函数传给子组件|子组件通过函数将数据传给父组件

父组件Dog有个函数myClick，这个函数打印父组件自己的一个属性this.state.id，打印一个参数value；父组件的render函数引用了子组件HotDog，子组件的myClick属性有父组件的函数myClick；子组件的render函数种有个button，这个button的单击事件回调函数就是父组件的myClick函数，传递的参数就是子组件的属性this.state.msg，数据就完成了从子组件传递到父组件

代码是在CodePen 运行的，可以将其中的js代码替换掉，id和msg并无特殊含义，只是例子

class HotDog extends React.Component {
  state = {msg: 'Hello World'};
  render() {
    return <button onClick={()=>{this.props.myClick(this.state.msg)}}>Click Me</button>;
  }
}
class Dog extends React.Component{
    constructor(props) {
    super(props);
    this.state = {id: 12};
  }
  myClick = value => {
    console.log(this.state.id);
    console.log(value);
  }
  render(){
    return <HotDog myClick={this.myClick}/>;
  }
  
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Dog/>);