react组件间通讯方式（组件传值）

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

一、props传值（父给子传）

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

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

// ParentComponent.js（父组件）
import ChildComponent from './ChildComponent';

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

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

export default ParentComponent;

// ChildComponent.js（子组件）
const ChildComponent = (props) => {
  return <div>{props.data}</div>;
};

export default ChildComponent;

二、回调函数：（子给父传）

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

// ParentComponent.js(父组件)
import ChildComponent from './ChildComponent';

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

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

export default ParentComponent;

// 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 来获取值。

// 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的值，可以参考孙子中的用法，都一样

// FatherComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

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

export default FatherComponent;

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

// 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。这里写你的逻辑

// 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、在你需要的父组件中引入，并且将它赋值给变量传给想要的组件

// ParentComponent.js
import useCounter from './useCounter';
import ChildComponent from './ChildComponent';

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

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

export default ParentComponent;

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

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

export default ChildComponent;

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

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

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

原文地址：https://blog.csdn.net/weixin_48633811/article/details/136347787

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！