如何在React中的分离文件(组件)之间传递状态(钩子)

Question

Btw我已经做了很多研究试图解决这个问题；到目前为止，我仍然停留在这个问题上：

这是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的目标

Answer 1

如果状态在组件之间共享，则需要将该状态提升为一个公共父级。

然后，您可以将该状态传递给孩子，可能是作为道具或上下文。

例如：

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>
)
}