面试题：React中复合组件模式的基本结构是什么

React复合组件模式基本结构

父组件：负责组合多个子组件，管理整体的状态和逻辑。父组件可以通过属性（props）向下传递数据给子组件，同时也可以定义一些方法供子组件调用。
子组件：专注于特定的功能实现，接收来自父组件的props并渲染相应的UI。子组件可以通过调用父组件传递的方法来反馈信息或触发父组件的状态更新。

父组件与子组件交互协作方式

数据传递：
- 父组件向子组件传递数据：父组件通过在子组件标签上设置属性（props），将数据传递给子组件。例如：<ChildComponent data={parentData} />，子组件通过props来接收并使用这些数据。
- 子组件向父组件传递数据：子组件通过调用父组件传递过来的回调函数，将数据传递给父组件。父组件定义一个函数，通过props传递给子组件，子组件在适当的时候调用这个函数并传入数据。
方法调用：
- 父组件调用子组件方法：在React中，通常不推荐直接调用子组件的方法，而是通过状态管理和props传递来控制子组件的行为。但在某些情况下，可以使用ref来获取子组件实例并调用其方法。
- 子组件调用父组件方法：父组件将方法作为props传递给子组件，子组件在需要时调用该方法，比如触发父组件的状态更新。

举例说明

import React, { useState } from 'react';

// 子组件
const Button = ({ onClick, text }) => {
    return (
        <button onClick={onClick}>
            {text}
        </button>
    );
};

// 父组件
const App = () => {
    const [count, setCount] = useState(0);

    const incrementCount = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <Button onClick={incrementCount} text="Increment" />
        </div>
    );
};

export default App;

在这个例子中，App是父组件，Button是子组件。父组件App通过props将incrementCount方法和text传递给子组件Button。子组件Button在按钮被点击时，调用父组件传递的onClick方法（即incrementCount），从而实现子组件与父组件的交互，更新父组件的count状态。

面试题：React中复合组件模式的基本结构是什么

知识考点

面试题答案

React复合组件模式基本结构

父组件与子组件交互协作方式

举例说明