Skip to main content

react的组件间传值

子传父​

在 React 中，将子组件的数据传递到父组件通常涉及以下步骤：

1. 父组件定义一个处理函数​

在父组件中，定义一个处理函数，这个函数会接收来自子组件的数据：

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

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

  // 处理来自子组件的数据
  const handleDataFromChild = (childData) => {
    setData(childData);
  };

  return (
    <div>
      <h1>Data from Child: {data}</h1>
      <ChildComponent onSendData={handleDataFromChild} />
    </div>
  );
}

export default ParentComponent;

2. 子组件通过 props 调用父组件的函数​

在子组件中，通过 props 调用父组件传递下来的处理函数，将数据传递给父组件：

import React from 'react';

function ChildComponent({ onSendData }) {
  const sendData = () => {
    const data = 'Hello from Child';
    onSendData(data); // 调用父组件的函数
  };

  return (
    <div>
      <button onClick={sendData}>Send Data to Parent</button>
    </div>
  );
}

export default ChildComponent;

3. 使用传递的数据​

在父组件中，使用 useState 保存从子组件接收到的数据，并在渲染中使用它。子组件通过 props 传递的函数在需要的时候调用，比如点击按钮时。

这样就实现了子组件向父组件传递数据的功能。如果有更多复杂的需求，还可以使用上下文 API 或状态管理库（如 Redux）。

父传子​

父组件向子组件传递数据是 React 中的一种常见操作，通常通过 props 实现。这使得子组件可以接收到父组件传递的数据或函数。下面是详细步骤：

1. 父组件传递数据给子组件​

在父组件中，定义你希望传递给子组件的数据，并将这些数据作为 props 传递给子组件：

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Hello from Parent";

  return (
    <div>
      <ChildComponent greeting={message} />
    </div>
  );
}

export default ParentComponent;

2. 子组件接收和使用父组件传递的数据​

在子组件中，通过 props 接收父组件传递的数据，并在需要的地方使用这些数据：

import React from 'react';

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

export default ChildComponent;

3. 传递函数作为 props​

除了传递数据，父组件还可以传递函数给子组件，子组件可以调用这些函数来通知父组件发生了什么事情：

父组件：​

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleClick = () => {
    alert('Button clicked in child');
  };

  return (
    <div>
      <ChildComponent onButtonClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

子组件：​

import React from 'react';

function ChildComponent({ onButtonClick }) {
  return (
    <div>
      <button onClick={onButtonClick}>Click me</button>
    </div>
  );
}

export default ChildComponent;

总结​

  1. 父组件定义数据或函数，并通过 props 将它们传递给子组件。
  2. 子组件通过 props 接收这些数据或函数，并在需要的地方使用它们。