react 组件通信-父传子

1.props直接传递数据

import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const dataFromParent = 'Hello from parent!';
  return (
    <div>
      <ChildComponent data={dataFromParent} />
    </div>
  );
};

import React from 'react';
const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  );
};

2.回调函数

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const [dataFromChild, setDataFromChild] = useState('');
  const handleChildData = (data) => {
    setDataFromChild(data);
  };
  return (
    <div>
      <ChildComponent sendDataToParent={handleChildData} />
      <p>Data from Child: {dataFromChild}</p>
    </div>
  );
};

import React from 'react';
const ChildComponent = (props) => {
  const sendDataToParent = () => {
    const dataToSend = 'Hello from child!';
    props.sendDataToParent(dataToSend);
  };
  return (
    <div>
      <button onClick={sendDataToParent}>Send Data to Parent</button>
    </div>
  );
};

两者如何选择： 在React中，父子组件之间的通信可以通过传递数据和使用回调函数两种方式来实现。两种方式各有优劣，具体取决于您的需求和组件结构。

1. 传递数据：

   • 优势：简单直接，适用于父组件向子组件传递数据，并且子组件仅需使用数据而无需进行其他操作时。
   • 示例：父组件通过props将数据传递给子组件，子组件接收props并使用数据。

2. 使用回调函数：

   • 优势：适用于父组件需要从子组件获取数据或者在子组件发生某些事件时执行特定操作。
   • 示例：父组件将一个回调函数传递给子组件，子组件在特定事件发生时调用该回调函数，从而触发父组件执行特定操作或获取数据。

综合来说，如果只是简单的数据传递，使用传递数据的方式更加简单和直接。但是如果需要从子组件获取数据或者在子组件事件触发时进行操作，则使用回调函数更加合适。根据具体的场景和需求来选择合适的通信方式是最佳实践。