Question

所以我有一个标头组件及其列表和一个按钮，即Login按钮。标头和登录组件位于<Switch>之外。

我要尝试的是单击标题组件中的登录按钮时，我希望整个登录组件都显示为弹出窗口。

我将如何实现？我知道您可以使用状态，但是如果它在同一个组件中，但是我想显示另一个组件。我需要redux还是只使用道具？

Answer 1

您可以将登录弹出窗口的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 && ( ... );
}

Answer 2

您只需传递一个函数即可更改Parent状态。

让我们调用组件Parent和Child。

在父组件中：

<Child toggleLoginDialog={this.toggleLoginDialog} />

...

toggleLoginDialog = () => {
  this.setState({ showDialog: !this.state.showDialog });
}

如何在React中单击显示组件？

2 个答案: