reactjs - 如何在这两个组件之间传递状态

问题描述

我正在尝试有条件地渲染功能组件。我有另一个用于页面布局的组件。它包含一个列表项，用户将单击该列表项以显示此其他组件。理想情况下，我希望拥有其中的一些。

我已经尝试了几乎所有可以在网上找到的示例。回调函数，使用 React 文档等。我只是想切换一个布尔值来显示一个组件或不显示一个组件。因此，对于我正在尝试做的事情，使用 Redux 似乎有点极端。我不确定这是否与下一个或打字稿项目有关。

这是父组件 - index.tsx

 const Index: React.FC = ({flagHelper}: any) => {
  const handleOpenLink = (href: string) => {
    window.open(href);
    return false;
  };
  const classes = useStyles();

  return (
    <Layout>
      <div className={classes.root}>
        <div className={classes.background}>
        </div>
        <Head>
          <title>Countryball Creator</title>
        </Head>
        <div className={classes.strip}>
        {flagHelper && (<div>hello</div>)}
        
        </div>
      </div>
    </Layout>
  );
};

export default Index;

这是布局/子组件。

export const Layout: React.FC<LayoutProps> = (props) => {
  const { container } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  }


// Set state for component
const [flagHelper, setFlagHelper] = useState(false); // Flag tool

  const drawer = (
    <div>
      <div className={classes.toolbar} />
      <Divider />
      <List>
        {['Pick Flag'].map((text) => (
          <ListItem button key={text} onClick={() => setFlagHelper(!flagHelper)} className={classes.menuItem}>
            <ListItemIcon className={classes.menuItem}><DashboardIcon /></ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );
  

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            Countryball Creator 
          </Typography>
          <User/>
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer} aria-label="mailbox folders">
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer // this one is for mobile
            container={container}
            variant="temporary"
            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        
        <Hidden xsDown implementation="css">
          <Drawer // This one is for desktop
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        {props.children}
      </main>
    </div>
  );
}

标签： reactjstypescriptnext.js

reactjs - 如何在这两个组件之间传递状态

问题描述

解决方案

推荐阅读