reactでコンポーネント間の値の受け渡しをどのように実装するのですか？

Reactにおいて、コンポーネント間で値を渡す方法はいくつかあります。以下にいくつか一般的な方法を挙げています：

1. 小道具

// 父组件
import React from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const data = "Hello, World!";
  return <ChildComponent data={data} />;
}

// 子组件
import React from "react";

function ChildComponent(props) {
  return <div>{props.data}</div>;
}

1. コンテキストタイプ
2. 使用コンテキスト

// 创建一个上下文对象
const MyContext = React.createContext();

// 父组件
import React from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const data = "Hello, World!";
  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
import React from "react";

function ChildComponent() {
  const data = React.useContext(MyContext);
  return <div>{data}</div>;
}

1. 繋がる (つながる)
2. useSelector

// 安装redux和react-redux库
npm install redux react-redux

// 创建一个Redux store
import { createStore } from "redux";

const initialState = {
  data: "Hello, World!"
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "UPDATE_DATA":
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

// 父组件
import React from "react";
import { connect } from "react-redux";
import ChildComponent from "./ChildComponent";

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

const mapStateToProps = state => {
  return {
    data: state.data
  };
};

export default connect(mapStateToProps)(ParentComponent);

// 子组件
import React from "react";
import { connect } from "react-redux";

function ChildComponent({ data }) {
  return <div>{data}</div>;
}

const mapStateToProps = state => {
  return {
    data: state.data
  };
};

export default connect(mapStateToProps)(ChildComponent);

異なるシーンに応じて、適切な方法を選択してデータを転送する、一般的な複数のコンポーネント間の値の受け渡し方法があります。