React子组件向父组件传值的简单示例

2023-12-22 01:26:41

引子

在React中，组件之间的通信是构建复杂用户界面的关键。子组件和父组件之间的数据传递是实现组件间通信的一种常见方式。子组件可以通过props属性接收来自父组件的数据，并通过事件（如onSelect）将数据传递回父组件。

示例：子组件向父组件传递值

为了更好地理解子组件向父组件传递值的过程，我们来看一个简单的示例。假设我们有一个父组件App，其中包含一个子组件ExpressionTree。ExpressionTree组件用于显示一棵树形结构的数据，而App组件负责处理用户输入并更新ExpressionTree组件的数据。

在App组件中，我们首先定义了一个名为data的状态变量，其中包含了要传递给ExpressionTree组件的数据。然后，我们在ExpressionTree组件的props属性中指定data变量，以将数据传递给ExpressionTree组件。

import React, { useState } from "react";

const App = () => {
  const [data, setData] = useState({
    name: "Root",
    children: [
      {
        name: "Child 1",
        children: [
          {
            name: "Grandchild 1.1",
          },
          {
            name: "Grandchild 1.2",
          },
        ],
      },
      {
        name: "Child 2",
        children: [
          {
            name: "Grandchild 2.1",
          },
          {
            name: "Grandchild 2.2",
          },
        ],
      },
    ],
  });

  return (
    <div>
      <ExpressionTree data={data} />
    </div>
  );
};

const ExpressionTree = ({ data }) => {
  return (
    <ul>
      {data.children.map((child) => (
        <li key={child.name}>
          {child.name}
          <ExpressionTree data={child} />
        </li>
      ))}
    </ul>
  );
};

export default App;

在ExpressionTree组件中，我们通过props属性接收到了data变量，并将其作为参数传递给了ExpressionTree组件的构造函数。在ExpressionTree组件中，我们使用data变量来渲染树形结构的数据。

当用户在ExpressionTree组件中点击某个节点时，ExpressionTree组件会触发一个onSelect事件，并将当前节点的数据作为参数传递给onSelect事件处理函数。在App组件中，我们通过给ExpressionTree组件的onSelect属性指定一个事件处理函数，来处理onSelect事件。

const App = () => {
  const [data, setData] = useState({
    name: "Root",
    children: [
      {
        name: "Child 1",
        children: [
          {
            name: "Grandchild 1.1",
          },
          {
            name: "Grandchild 1.2",
          },
        ],
      },
      {
        name: "Child 2",
        children: [
          {
            name: "Grandchild 2.1",
          },
          {
            name: "Grandchild 2.2",
          },
        ],
      },
    ],
  });

  const handleSelect = (node) => {
    console.log(`Selected node: ${node.name}`);
  };

  return (
    <div>
      <ExpressionTree data={data} onSelect={handleSelect} />
    </div>
  );
};