react组件间通讯方式(组件传值)

组件间传值有多种方式,包括使用 props、Context API、回调函数、自定义 Hook、事件总线等。下面我将逐一介绍这些传值方式:

一、props传值(父给子传)

1、最常见的方式是通过 props 将数据从父组件传递给子组件。

2、在父组件中通过 JSX 的属性形式将数据传递给子组件。

javascript 复制代码
// ParentComponent.js(父组件)
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from parent';

  return (
    <ChildComponent data={data} />
  );
};

export default ParentComponent;
javascript 复制代码
// ChildComponent.js(子组件)
const ChildComponent = (props) => {
  return <div>{props.data}</div>;
};

export default ChildComponent;

二、回调函数:(子给父传)

1、父组件可以通过回调函数的方式将数据传递给子组件,子组件可以通过调用回调函数来将数据传递回父组件。

javascript 复制代码
// ParentComponent.js(父组件)
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleData = (data) => {
    console.log(data);
  };

  return (
    <ChildComponent onData={handleData} />
  );
};

export default ParentComponent;
javascript 复制代码
// ChildComponent.js(子组件)
const ChildComponent = ({ onData }) => {
  const sendDataToParent = () => {
    const data = 'Hello from child';
    onData(data);
  };

  return (
    <button onClick={sendDataToParent}>Send Data to Parent</button>
  );
};

export default ChildComponent;

三、Context 上下文

使用 React 的 Context API 可以在组件树中跨层级传递数据,而不必一级一级地手动传递 props。

1、首先在爷爷组件中创建一个 Context 对象,并将要传递的值存储在该 Context 中,然后在孙子组件中访问这个 Context 来获取值。

javascript 复制代码
// GrandFatherComponent.js(爷爷组件)
import React, { createContext, useState } from 'react';
import FatherComponent from './FatherComponent';

export const GrandFatherContext = createContext();

const GrandFatherComponent = () => {
  const [valueToPass, setValueToPass] = useState('Value from GrandFather');

  return (
    <GrandFatherContext.Provider value={valueToPass}>
      <FatherComponent />
    </GrandFatherContext.Provider>
  );
};

export default GrandFatherComponent;

2、父组件基本不需要管,如果想获去爷爷的中Context的值,可以参考孙子中的用法,都一样

javascript 复制代码
// FatherComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const FatherComponent = () => {
  return (
    <div>
      <ChildComponent />
    </div>
  );
};

export default FatherComponent;

3、在孙子组件中引入爷爷的GrandFatherContext,来获取爷爷传的值。可以跨多个后代传。

javascript 复制代码
// ChildComponent.js(孙子)
import React, { useContext } from 'react';
import { GrandFatherContext } from './GrandFatherComponent';

const ChildComponent = () => {
  const valueFromGrandFather = useContext(GrandFatherContext);

  return (
    <div>
      <p>Value from GrandFather: {valueFromGrandFather}</p>
    </div>
  );
};

export default ChildComponent;

四、自定义hooks

1、写一个自定义的函数当作hooks。这里写你的逻辑

javascript 复制代码
// UseCounter.js
import { useState } from 'react';

const useCounter = (initialCount) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
};

export default useCounter;

2、在你需要的父组件中引入,并且将它赋值给变量传给想要的组件

javascript 复制代码
// ParentComponent.js
import useCounter from './useCounter';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const counter = useCounter(0);

  return (
    <ChildComponent counter={counter} />
  );
};

export default ParentComponent;

3、在子组件中直接使用这个函数

javascript 复制代码
// ChildComponent.js
const ChildComponent = ({ counter }) => {
  return (
    <div>
      Count: {counter.count}
      <button onClick={counter.increment}>Increment</button>
    </div>
  );
};

export default ChildComponent;

五、事件总线(不推荐使用。有兴趣的可以搜索资料)

六、redux(专门会在之后出一版内容来讲),redux很好用,还有很多中间件。希望大家好好学习。

创作不易,全部免费,亲,点个关注吧。谢谢大家了。你们的关注就是我写博客的动力!!!

相关推荐
索然无味io42 分钟前
XML外部实体注入--漏洞利用
xml·前端·笔记·学习·web安全·网络安全·php
ThomasChan1231 小时前
Typescript 多个泛型参数详细解读
前端·javascript·vue.js·typescript·vue·reactjs·js
爱学习的狮王1 小时前
ubuntu18.04安装nvm管理本机node和npm
前端·npm·node.js·nvm
东锋1.31 小时前
使用 F12 查看 Network 及数据格式
前端
zhanggongzichu1 小时前
npm常用命令
前端·npm·node.js
anyup_前端梦工厂1 小时前
从浏览器层面看前端性能:了解 Chrome 组件、多进程与多线程
前端·chrome
zzlyx992 小时前
.NET 9 微软官方推荐使用 Scalar 替代传统的 Swagger
javascript·microsoft·.net
chengpei1472 小时前
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确
java·前端·chrome·spring boot·json
Bunury2 小时前
组件封装-List
javascript·数据结构·list
我命由我123452 小时前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js
前端·javascript·前端框架·npm·node.js·html5·js