React通信

程序员王天

发布于 2023-10-18 19:28:08

1270

发布于 2023-10-18 19:28:08

文章被收录于专栏：王天的进阶之路王天的进阶之路

# 组件通信

# 父子 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>;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023年9月30日，如有侵权请联系 cloudcommunity@tencent.com 删除

react