所以我有一个标头组件及其列表和一个按钮，即Login按钮。
标头和登录组件位于<Switch>之外。
我要尝试的是单击标题组件中的登录按钮时，我希望整个登录组件都显示为弹出窗口。
我将如何实现？我知道您可以使用状态，但是如果它在同一个组件中，但是我想显示另一个组件。我需要redux还是只使用道具？
zhuoaima 回答：如何在React中单击显示组件？
您可以将登录弹出窗口的isShown状态移动到上层组件（或全局上下文），以便能够从不同位置访问它：
// context example
// App.js
const LoginContext = React.createContext(false);
const LoginContextProvider = ({ children }) => {
const [ isShown,setShown ] = React.useState(false);
return (
<LoginContext.Provider value={{ isShown,setShown }}>
{{children}}
</LoginContext.Provider>
);
}
const useLoginPopup = () => React.useContext(LoginContext);
const App = () => (
<LoginContextProvider>
// ...
</LoginContextProvider>
);
// Header component
const Header = () => {
const { setShown } = useLoginPopup();
return (
<Button onClick={ () => setShown(true); }>Login</Button>
);
};
// Login popup
const Popup = () => {
const { isShown } = useLoginPopup();
return isShown && ( ... );
}
您只需传递一个函数即可更改Parent状态。
让我们调用组件Parent和Child。
在父组件中：
<Child toggleLoginDialog={this.toggleLoginDialog} />
...
toggleLoginDialog = () => {
this.setState({ showDialog: !this.state.showDialog });
}