react父子组件传参

父组件传递函数式组件

传递方式非常的简单就是在父组件使用子组件的地方，在子组件当中添加一些自定义的一些属性，这样就表示你要给某一个子组件传递一些数据，至于是什么数据就看你自己了，在父组件当中传递了数据给子组件那么在子组件当中该如何拿到对应的数据呢，在 React 当中它会把所有父组件传递的数据都放在一个 props 的对象当中，然后在传递给我们的子组件，由于我们的子组件是一个函数组件，所以它就会把 props 对象传递给构造函数，那么它会传递给我们的构造函数我们就可以在函数的构造形参当中进行获取了：

import React from 'react';

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <p>子组件接收到的数据: {props.data}</p>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  const data = '这是父组件传递给子组件的数据';

  return (
    <div>
      <h2>父组件</h2>
      <ChildComponent data={data} />
    </div>
  );
};

export default ParentComponent;

父组件 ParentComponent 定义了一个名为 data 的变量，并将其作为 data 属性传递给子组件 ChildComponent。在子组件中，可以通过 props.data 访问父组件传递过来的数据。