react-ant 父子组件之间传值

一、父组件向子组件传值

在React中，父子组件之间的数据传递通常通过props（属性）来实现。父组件可以通过props向子组件传递数据，子组件通过props接收这些数据。这是React数据流的基本原则之一：数据自上而下（从父组件流向子组件）流动。

定义父组件

假设我们有一个父组件ParentComponent，它包含一个状态message和一个子组件ChildComponent。我们希望将message状态传递给ChildComponent。

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [message, setMessage] = useState('Hello from Parent!');

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
    </div>
  );
};

export default ParentComponent;

ParentComponent通过<ChildComponent message={message} />将message状态作为prop传递给ChildComponent。

定义子组件

子组件ChildComponent接收message作为prop，并在其渲染输出中使用它。

import React from 'react';

const ChildComponent = ({ message }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Message from parent: {message}</p>
    </div>
  );
};

export default ChildComponent;

在ChildComponent中，我们通过解构props对象来获取message，然后在组件的渲染输出中显示它。

总结

在父组件和子组件之间通过props传递数据。这是React组件间通信的基础，也适用于在使用Ant Design或其他UI库时的组件。通过这种方式，可以构建出复杂的组件层次结构，同时保持数据流的清晰和可管理。

二、子组件向父组件传值

在React中，子组件给父组件传值通常通过回调函数来实现。父组件将一个函数作为prop传递给子组件，然后子组件通过调用这个函数并传递数据来实现向父组件的数据传递。这种方式允许父组件根据子组件传递的数据来更新自己的状态或执行其他操作。

定义父组件

定义父组件ParentComponent，它包含一个状态childData和一个子组件ChildComponent。我们希望ChildComponent能够向ParentComponent传递数据。

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [childData, setChildData] = useState('');

  // 定义一个函数用于接收子组件传递的数据
  const handleDataFromChild = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Data from child: {childData}</p>
      <ChildComponent onData={handleDataFromChild} />
    </div>
  );
};

export default ParentComponent;

ParentComponent通过<ChildComponent onData={handleDataFromChild} />将handleDataFromChild函数作为prop传递给ChildComponent。

定义子组件

子组件ChildComponent接收onData作为prop，并在某个事件（例如按钮点击）时调用它，传递数据给父组件。

import React from 'react';
import { Button } from 'antd';

const ChildComponent = ({ onData }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <Button onClick={() => onData('Data from Child')}>Send Data to Parent</Button>
    </div>
  );
};

export default ChildComponent;

在ChildComponent中，通过一个按钮点击事件来调用onData函数，并传递一个字符串'Data from Child'给父组件。

总结

通过回调函数实现子组件向父组件的数据传递。这种模式在React中非常常见，是实现组件间双向通信的基础。通过这种方式，可以构建出更加动态和交互式的应用。

三、同时实现父传子和子传父

在React中，实现父子组件之间的双向数据流（即父组件向子组件传递数据，同时子组件也能向父组件传递数据）通常涉及到两个步骤：父组件通过props向子组件传递数据和回调函数，子组件通过调用回调函数来向父组件传递数据。这种模式允许父组件根据子组件传递的数据更新自己的状态，同时也能将更新后的状态传递给子组件。

定义父组件

父组件ParentComponent维护一个状态data，并将这个状态以及一个用于更新这个状态的函数handleDataChange传递给子组件ChildComponent。

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [data, setData] = useState('Initial Data');

  // 用于从子组件接收数据并更新状态的函数
  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Data: {data}</p>
      <ChildComponent data={data} onDataChange={handleDataChange} />
    </div>
  );
}

export default ParentComponent;

定义子组件

子组件ChildComponent接收来自父组件的data和onDataChange作为props。它显示data的值，并提供一个输入框让用户输入新的数据。当用户输入数据时，子组件通过调用onDataChange回调函数将新数据传递回父组件。

import React from 'react';

function ChildComponent({ data, onDataChange }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Received data: {data}</p>
      <input
        type="text"
        value={data}
        onChange={(e) => onDataChange(e.target.value)}
        placeholder="Enter new data"
      />
    </div>
  );
}

export default ChildComponent;

父组件通过props向子组件传递了data和一个更新这个data的函数handleDataChange。子组件通过一个输入框接收用户的输入，并在输入变化时调用onDataChange函数，将新的数据传递回父组件，父组件随后更新自己的状态，并将更新后的状态通过props再次传递给子组件，从而实现了双向数据流。

总结

这种模式是React中实现组件间通信的常见方式，它遵循了React的数据流原则，即数据自上而下（从父组件流向子组件）流动，而事件（如用户输入）则触发状态的更新和数据的反向流动。