react 函数组件 父组件调用子组件

在React中，函数组件是一种轻量级的组件编写方式，它使用JavaScript函数直接返回HTML元素。当父组件需要调用子组件时，通常通过props（属性）的方式传递数据给子组件。

假设有一个简单的父组件`App.js`：

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

function App() {
  const name = "Parent Component";

  return (
    <div>
      <h1>Hello from Parent</h1>
      <ChildComponent name={name} />
    </div>
  );
}

export default App;

在这个例子中，`App`组件作为父组件，导入并调用了名为`ChildComponent`的子组件。`<ChildComponent name={name} />`这行代码表示将`name`这个prop传递给了子组件。

而子组件`ChildComponent.js`可能会像这样接收并显示传入的数据：

import React from 'react';

const ChildComponent = ({ name }) => {
  return (
    <p>This is the {name} component.</p>
  );
};

export default ChildComponent;

当`App`渲染时，`ChildComponent`会接收到`name`值，并在自身内部渲染包含该值的文本。