React父子组件互相传值-函数式

895 阅读1分钟

父组件 引入子组件,子组件的名字一定要大写 如Header


export default function App() {
  function getChildrenData(e) {
    console.log('我是子组件的值',e)
  }

  return <div className="container">
    <Header name="欢迎来到"  getChildrenData = { getChildrenData } />
  </div>

}

子组件


export default function Header(props) {
    const { getChildrenData } = props;
    const str = '我是子组件传给父组件的值'
    return <div>
        <h1 >{ props.name }</h1>
        <button onClick={ () => getChildrenData(str) }>子组件传递给父组件的值</button>
    </div>
}