面试题：React复杂组件中React State的状态提升应用

Question

在一个由多个子组件构成的复杂React组件结构中，其中一个子组件A需要修改另一个子组件B的显示状态，而这个显示状态是通过React State来管理的。请描述如何通过状态提升来实现这个需求，并简单写出关键代码示例。

Answer 1

1. 状态提升原理：
   • 由于子组件A和子组件B是兄弟组件关系，无法直接通信。通过将共享状态提升到它们最近的共同父组件中，使得父组件可以控制状态，并通过props将状态和修改状态的函数传递给子组件A和子组件B。
2. 关键代码示例：
   • 父组件代码：

import React, { useState } from'react';

const ParentComponent = () => {
    const [isComponentBVisible, setIsComponentBVisible] = useState(false);

    const handleToggleComponentB = () => {
        setIsComponentBVisible(!isComponentBVisible);
    };

    return (
        <div>
            <ChildComponentA onToggle={handleToggleComponentB} />
            {isComponentBVisible && <ChildComponentB />}
        </div>
    );
};

export default ParentComponent;

• 子组件A代码：

import React from'react';

const ChildComponentA = ({ onToggle }) => {
    return (
        <button onClick={onToggle}>
            点击修改子组件B的显示状态
        </button>
    );
};

export default ChildComponentA;

• 子组件B代码：

import React from'react';

const ChildComponentB = () => {
    return (
        <div>
            这是子组件B
        </div>
    );
};

export default ChildComponentB;