React学习专题之子组件向父组件传值

在 React 中，子组件将数据传回其父组件有两种主要方式：

1.使用回调函数：回调函数是子组件与其父组件通信的常用方式。要使用回调函数，首先需要在父组件中定义该函数。这可以通过向组件的 JavaScript 对象添加函数属性来完成。例如：

JavaScript

const ParentComponent = () => {
  const handleDataChange = (newData) => {
    console.log("Data changed:", newData);
  };

  return (
    <div>
      <ChildComponent onDataChange={handleDataChange} />
    </div>
  );
}；

在父组件中定义回调函数后，您可以将其作为 prop 传递给子组件。例如：

JavaScript

const ChildComponent = (props) => {
  const handleChange = (event) => {
    const newData = event.target.value;
    props.onDataChange(newData);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
    </div>
  );
};

在子组件中，只要您想将数据传回父组件，就可以调用回调函数。例如：

JavaScript

const ChildComponent = (props) => {
  const handleChange = (event) => {
    const newData = event.target.value;
    props.onDataChange(newData);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <button onClick={() => props.onDataChange("Custom data")}>
        Send Custom Data
      </button>
    </div>
  );
};

2.使用 Redux 或类似的状态管理库： Redux 是 React 应用程序的流行状态管理库。它允许您在中央存储中管理应用程序的状态，可以从应用程序中的任何组件访问该状态。要使用 Redux，您首先需要安装 Redux 库并设置 Redux 存储。完成此操作后，您可以创建 Redux 操作来分派数据更改，并且可以使用 Redux 挂钩将组件连接到存储。

以下是如何使用 Redux 将数据从子组件传递到父组件的示例：

JavaScript

// actions/counterActions.js
export const incrementCounter = () => ({ type: "INCREMENT_COUNTER" });
export const decrementCounter = () => ({ type: "DECREMENT_COUNTER" });

// reducers/counterReducer.js
const initialState = { counter: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT_COUNTER":
      return { counter: state.counter + 1 };
    case "DECREMENT_COUNTER":
      return { counter: state.counter - 1 };
    default:
      return state;
  }
};

// App.js
import React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import CounterReducer from "./reducers/counterReducer";
import ChildComponent from "./ChildComponent";

const store = createStore(CounterReducer);

const App = () => {
  return (
    <Provider store={store}>
      <ChildComponent />
    </Provider>
  );
};

export default App;

// ChildComponent.js
import React from "react";
import { useDispatch } from "react-redux";
import { incrementCounter } from "../actions/counterActions";

const ChildComponent = () => {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(incrementCounter())}>Increment Counter</button>
    </div>
  );
};

在此示例中，子组件调度 Redux 操作来递增计数器值。然后，父组件可以从 Redux 存储中访问更新后的计数器值。

使用回调函数是将数据传递回 React 父组件的一种简单直接的方法。但是，如果您需要管理复杂的应用程序状态，或者需要在不直接相关的多个组件之间共享数据，那么使用 Redux 这样的状态管理库可能是更好的选择。

以下是每种方法的优缺点的总结：

回调函数

优点：

• 简单易用
• 适合简单的数据传递场景
• 无需额外设置

缺点：

• 可能导致组件紧密耦合
• 不适合管理复杂的应用程序状态