父传子#

父传子主要通过props实现

• 父的准备：
  使用<ChildPart/>插入子模块时，为其设置props。

  return(
      <ChildPart prop1={可是是函数名作为回调函数} props2={变量名、常量名等}>
  )
  

• 子的准备：
  function()中设置好参数

  function ChildPart({prop1, prop2}){
  }
  

子模块中也可以设置默认参数

子传父#

主要通过回调函数实现

• 父的准备
  利用父传子的方法将回调函数(是在父组件中生命的)设为props传递给子组件

  export default function FatherPart(){
      const [infoFromChild, setInfo] = useState("");
      //设置回调函数callback
      const callback = (msg) => {
          setInfo(msg)    
      }
      return (<div> <ChildPart func={callback}></div>)
  }
  

• 子的准备 调用通过props传递的回调函数以实现子传父

  function ChildPart({func}){
      return (<button onClick={func(100)}> click me</button>)
  }
  

也可以把父组件中infoFromChild和setInfo都传入子组件,总而能够在子组件中根据旧值来更新新值

关于children#

父组件中使用子组件有两种方式。

• <ChildCompoent/>
• <ChildCompoent>中间的内容</ChildCompoent> 在方式2中，子组件首尾标签之间的内容是通过childrenprop在子组件中渲染的。

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}
export default function Toolbar() {
  return (
    <div>
      <AlertButton message="正在播放！">
        播放电影
      </AlertButton>
    </div>
  );
}