如何在 React 中将数据从子组件传递给父组件

在 React 中，数据流通常是单向的，这意味着数据是从父组件传递给子组件的。但是，在某些情况下，您可能需要将数据从子组件传递回其父组件。

有两种主要方法可以做到这一点：

1. 使用回调函数
2. 使用 Context

使用回调函数

要使用回调函数将数据从子组件传递给父组件，请按照以下步骤操作：

1. 在父组件中，创建一个回调函数。此回调函数将从子组件接收数据。
2. 将回调函数作为 Props 传递给子组件。
3. 在子组件中，调用父回调函数并将数据传递给它。
4. 在父组件中，使用回调函数接收的数据更新其状态。

以下是一个示例：

// ParentComponent.js
import React, { useState } from "react";

const ParentComponent = () => {
  const [data, setData] = useState("");

  const handleDataChange = newData => {
    setData(newData);
  };

  return (
    <div>
      <ChildComponent onSelectLanguage={handleDataChange} />
      <p>The selected language is: {data}</p>
    </div>
  );
};

// ChildComponent.js
import React from "react";

const ChildComponent = ({ onSelectLanguage }) => {
  const handleLanguageChange = e => {
    const selectedLanguage = e.target.value;
    onSelectLanguage(selectedLanguage);
  };

  return (
    <div>
      <select onChange={handleLanguageChange}>
        <option value="english">English</option>
        <option value="spanish">Spanish</option>
      </select>
    </div>
  );
};

export default ParentComponent;

使用 Context

要使用 Context 将数据从子组件传递给父组件，请按照以下步骤操作：

1. 在父组件中，创建一个 Context。
2. 将 Context 提供给子组件。
3. 在子组件中，使用 Context 消费者组件来访问 Context 中的数据。
4. 在子组件中，使用 Context 消费者组件来更新 Context 中的数据。

以下是一个示例：

// ParentComponent.js
import React, { createContext, useState } from "react";

const LanguageContext = createContext("");

const ParentComponent = () => {
  const [language, setLanguage] = useState("english");

  return (
    <LanguageContext.Provider value={language}>
      <ChildComponent />
    </LanguageContext.Provider>
  );
};

// ChildComponent.js
import React, { useContext } from "react";

const LanguageContext = React.createContext("");

const ChildComponent = () => {
  const language = useContext(LanguageContext);

  const handleLanguageChange = e => {
    const selectedLanguage = e.target.value;
    setLanguage(selectedLanguage);
  };

  return (
    <div>
      <select onChange={handleLanguageChange}>
        <option value="english">English</option>
        <option value="spanish">Spanish</option>
      </select>
    </div>
  );
};

export default ParentComponent;

哪种方法更好？

哪种方法更好取决于您的具体需求。如果您只需要将数据从一个子组件传递给父组件，那么使用回调函数是最好的方法。如果您需要将数据从多个子组件传递给父组件，那么使用 Context 是最好的方法。