如何在 React 中的分隔文件（组件）之间传递状态（挂钩）答案

【问题标题】：How to pass a state (hook) between separated files (components) in React如何在 React 中的分隔文件（组件）之间传递状态（挂钩）
【发布时间】：2021-12-30 00:10:21
【问题描述】：

顺便说一句，我已经做了很多研究试图解决这个问题；到目前为止，我仍然坚持这一点：

这是file1.jsx中的第一个组件：

import * as React from 'react';

export default function MenuPopupState(props){
    const [career, setCareer] = React.useState('');

    return (
        <div>
            <button onClick={() => { setCareer(career) }}>
                Press me
            </button>
        </div>
    )
}

这是file2.jsx 中的另一个组件，我想在其中使用career 状态：

import * as React from 'react';
import MenuPopupState from './components/Menupopup';

export default function Header(){
    const career = MenuPopupState.career;

    return (
        <div>
            <a key={career.id}>
                {career.name}
            </a>
        </div>
    )
}

我尝试了不同的方法，但没有达到在标题中使用 career.name 的目标

【问题讨论】：

你需要使用像redux这样的全局状态管理，才能在组件之间共享数据
@nassimmiled 这绝对是不真实的。有很多方法可以将状态细化到树的各个分支，redux 和全局状态管理库只是其中一种方法。它们不应该是您尝试的第一个，因为更简单的东西就可以了。
@AlexWayne 确实如此，但他没有提到它们是相关的，在许多情况下，您无法将状态提升到父组件，因此您必须使用全局状态管理

标签： reactjs react-hooks

【解决方案1】：

如果状态在组件之间共享，那么您需要将该状态提升到一个共同的父级。

然后您可以将该状态传递给孩子，可能是props 或context。

例如：

function App() {
    const [career, setCareer] = React.useState('');

    return <>
        <MenuPopupState career={career} onClick={setCareer} />
        <Header career={career} />
    </>
}

function MenuPopupState(props){
    return (
        <div>
            <button onClick={() => props.onClick(props.career)}>
                Press me
            </button>
        </div>
    )
}

function Header(props){
    return (
        <div>
            <a key={props.career.id}>
                {props.career.name}
            </a>
        </div>
    )
}

【讨论】：