跳至主要內容

React通信

程序员王天小于 1 分钟

组件通信

父子 props

父组件标签内的 jsx 内容,通过 children 作为插槽传入子组件

子向父-回调函数

父组件中通过 props 向子组件传参函数,子组件触发函数参数,实现子父通信

父子-子父组件通信示例

子组件

import React from "react";

interface ChildrenProps {
  title: string;
  dbClick?: () => void;
  children?: any;
}

const Children: React.FC<ChildrenProps> = ({
  dbClick,
  title,
  children,
}: ChildrenProps) => {
  return (
    <>
      <h1 onDoubleClick={dbClick}> {title}</h1>
      {children}
    </>
  );
};

export default Children;

父组件

{
  /* 父子传参 props ;父组件标签内的jsx内容,通过children作为插槽传入子组件*/
}
{
  /* 子向父通信-回调函数 - 父组件中通过props向子组件传参函数,子组件触发函数参数,实现子父通信 */
}
<Children title="标题" dbClick={() => alert("双击了")}>
  {<div>{a}</div>}
</Children>;

跨组件

redux 仓库

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com