react+ts父子组件传值

父传子

①在父组件中定义const nameFromParent: string = "John";

②从父组件传递给子组件<ChildComponent name={nameFromParent} />

③在子组件中定义属性的类型interface ChildProps { age: number;}

④如果数据多需要解构再使用const { name,... } = props;,如果只有一个参数也可以直接卸载函数的参数括号中

⑤在子组件中使用<p>Child Component</p>

ts 复制代码
import React from 'react';

// 子组件
interface ChildProps {
  name: string;
  age: number;
  handleClick: () => void;
}

const ChildComponent: React.FC<ChildProps> = (...props) => {
  const { name, age, handleClick } = props;

  return (
    <div>
      <p>Child Component</p>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

// 父组件
const ParentComponent: React.FC<ParentProps> = () => {
  const nameFromParent: string = "John";
  const ageFromParent: number = 25;

  const handleClick = () => {
    console.log('Button clicked!');
  };

  // 使用 {...props} 将所有属性传递给子组件
  return (
    <div>
      <p>Parent Component</p>
      <ChildComponent name={nameFromParent} age={ageFromParent} handleClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

子传父

①在父组件中定义事件名称并赋予点击事件<ChildComponent sendDataToParent={handleDataFromChild} />

②在父组件中实现点击事件const handleDataFromChild = (data: string) => {};

③在子组件中定义事件类型interface ChildProps {sendDataToParent: (data: string) => void;}

④如果数据多需要解构再使用const { sendDataToParent,... } = props;,如果只有一个参数也可以直接卸载函数的参数括号中

⑤在子组件中定义点击事件并<button onClick={sendData}>Send Data to Parent</button>

⑥并在子组件中实现点击事件调通过父组件传过来的事件传递参数const sendData = () => {sendDataToParent(data); };

另外如果想不点击直接发送参数的话可以在useEffect(() => {sendDataToParent(data);},[sendDataToParent])

ts 复制代码
import React from 'react';

// 子组件
interface ChildProps {
  sendDataToParent: (data: string) => void;
}

const ChildComponent: React.FC<ChildProps> = ({ sendDataToParent }) => {
  const sendData = () => {
    const data = "Data from Child";
    // 在需要的时候调用回调函数传递信息给父组件
    sendDataToParent(data);
  };

  return (
    <div>
      <p>Child Component</p>
      <button onClick={sendData}>Send Data to Parent</button>
    </div>
  );
};


// 父组件
const ParentComponent: React.FC<ParentProps> = () => {
    
  const handleDataFromChild = (data: string) => {
    console.log('Data received from Child:', data);
    // 在这里处理从子组件接收到的数据
  };

  return (
    <div>
      <p>Parent Component</p>
      {/* 将回调函数传递给子组件 */}
      <ChildComponent sendDataToParent={handleDataFromChild} />
    </div>
  );
};

export default ParentComponent;
相关推荐
LHX sir23 分钟前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S32 分钟前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长44 分钟前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院1 小时前
vue的组件通信
前端·javascript·vue.js
PairsNightRain1 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端1 小时前
React 剧变!
前端·react.js·前端框架
teeeeeeemo1 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
岁月宁静2 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby2 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒2 小时前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端