状态提升

什么是状态提升

状态提升是一种在 React 中处理共享状态的方法。当多个组件需要共享相同的数据时，可以将该数据提升到这些组件的最近共同祖先中。这样，这些组件就可以通过 props 来访问和修改这个共享的数据。

举例

下面是一个简单的例子，演示了如何通过状态提升来处理共享状态。

两个子组件Panel共享父组件中的activeIndex状态，当点击其中一个子组件时，更新父组件中的activeIndex状态，从而实现两个子组件之间状态的共享。

提示

状态在哪里，操作状态的方法就在哪里。

父组件

import { useState } from "react";
import Panel from "./Panel";

export default function LiftingState() {
    const [activeIndex, setActiveIndex] = useState(0);

    return (
        <>
            <h2>哈萨克斯坦，阿拉木图</h2>
            <Panel
                title="关于"
                isActive={activeIndex === 0}
                clickBtn={() => setActiveIndex(0)}
            >
                阿拉木图人口约200万，是哈萨克斯坦最大的城市。
            </Panel>

            <Panel
                title="词源"
                isActive={activeIndex === 1}
                clickBtn={() => setActiveIndex(1)}
            >
                这个名字来自于 <span lang="kk-KZ">алма</span>
                ，哈萨克语中“苹果”的意思，经常被翻译成“苹果之乡”。
            </Panel>
        </>
    );
}

子组件

export default function Panel({
    children,
    title,
    isActive,
    clickBtn,
}: {
    children: React.ReactNode;
    title: string;
    isActive: boolean;
    clickBtn: () => void;
}) {
    return (
        <>
            <h2>{title}</h2>
            {isActive && <p>{children}</p>}
            {!isActive && <button onClick={clickBtn}>显示</button>}
        </>
    );
}