详细步骤

初始状态：

第一次汇报：

第二次汇报：

小结兄弟传值

对于同级组件之间进行的传值我们可以通过父组件进行中转，我们还是来看例子

还是小宝，没错，这是个连续剧。。。

小宝想告诉正在外地上大学的哥哥自己考了100分的这件事，但是自己没有手机不能直接联系，这时候就要向父母求助了。

代码解释1. Child1 组件（哥哥）

function Child1(props) {
  return <div>哥哥接收到的信息 --- {props.received}div>;
}

2. Child2 组件（小宝）

function Child2(props) {
  const score = "小宝考了一百分！";
  return (
    <div>
      小宝---<button onClick={() => props.tellParent(score)}>告诉哥哥button>
    div>
  );
}

3. Parent 组件（父母）

import { useState } from "react";
export default function Parent() {
  const [message, setMessage] = useState();
  const getData = (data) => {
    setMessage(data);
  };
  return (
    <div>
      <h2>Parenth2>
       {console.log({ score })}
      <Child1 received={message}>Child1>
      <Child2 tellParent={getData}>Child2>
    div>
  );
}

情景剧剧本第一幕：初始状态第二幕：小宝告诉哥哥成绩

详细步骤

初始状态：

点击按钮：

更新状态：

显示消息：

小结祖孙传值

由于祖孙传值的方式有多种，这里我们就不采用情景剧进行模拟了。

在React中，祖孙组件传值可以通过以下几种方式实现：

1. 通过props进行传值

通常在比较简单的情况，祖父组件会通过props将数据传递给父组件，父组件再将其传递给子组件。以下是一个隔代向子组件传值的简单示例：

//Grandfather.jsx
import React from "react";
const Grandfather = () => {
  const data = "Grandfather的数据";
  return (
    <div>
      <h2>Grandfatherh2>
      {data}
    div>
  );
};
export default Grandfather;

// Father.jsx
import React from "react";
import Grandfather from "./Grandfather";
export default function Father(props) {
  return (
    <div>
      <h3>Fatherh3>
      <Grandfather data={props.data}>Grandfather>
    div>
  );
}

// Son.jsx
import React from "react";
import Father from "./Father";
export default function Son(props) {
  return (
    <div>
      <h4>Sonh4>
      <Father data={props.data} />
    div>
  );
}

2. 使用Context API

如果数据需要在多个层级的组件之间共享，可以使用Context API。

核心概念createContext()

createContext 是 React 中的一个函数，它用于创建一个 Context 对象。这个对象包括两个主要的部分：

const MyContext = React.createContext();

Provider（数据提供者）

Provider 是用来提供数据的组件。它接收一个 value 属性，所有包裹在 Provider 组件内的组件都可以访问到这个 value，无论它们在组件树中有多深。

<MyContext.Provider value={/* 传递的值 */}>
  {/* 子组件 */}
MyContext.Provider>

Consumer（数据消费者）

Consumer 用来获取 Provider 提供的 value。虽然可以直接使用 Consumer 来消费 Context，但 React 更常用 useContext 钩子来获取 Context 的值，写法更加简洁。

<MyContext.Consumer>
  {value => /* 使用 value */}
MyContext.Consumer>

或者使用更现代的 useContext：

const value = useContext(MyContext);

使用步骤创建 Context：用 createContext() 创建一个 Context 对象。提供数据：使用 Context.Provider 提供数据，通常包裹在应用的顶层。消费数据：在需要使用数据的地方通过 useContext 获取这样可以避免层层传递props。以下是一个简单的示例：

import React from "react";
import { createContext } from "react";
const { Provider, Consumer } = createContext();
function Son() {
  return (
    <div>
      <h4>Son区域h4>
      {/* 在需要接收Grandfather的数据的组件中，添加Consumer */}
      <Consumer>
        {(value) => (
          <h4 style={{ backgroundColor: "lightpink" }}>Son接收的{value}h4>
        )}
      Consumer>
    div>
  );
}
function Father() {
  return (
    <div>
      <h3>Father区域h3>
      <Son>Son> 
      <Consumer>
        {(value) => (
          <h4 style={{ backgroundColor: "red" }}>Father接收的{value}h4>
        )}
      Consumer>
    div>
  );
}
export default function Grandfather() {
  const data = "Grandfather的数据";
  return (
    <div>
      <h2>Grandfatherh2>
      {/*用Provider进行数据提供，让Grandfather中的后代组件都可以接收*/}
      <Provider value={data}>
        <Father />
      Provider>
    div>
  );
}

小结

以上就是本文全部内容，希望对你理解React组件传值有所帮助，感谢你的阅读！