javascript - 如何从同一页面的不同部分单击基于按钮的同一页面中的动态组件？

问题描述

我正在使用 material-ui 创建仪表板类型的应用程序做出反应。在仪表板主页中，有 3 个部分，1 个用于项目，1 个用于项目摘要部分，另一个用于通知。我想要这样的功能，当我单击项目部分中的一个项目时，项目详细信息将呈现在仪表板项目摘要部分的同一页面上。

我Route试过react-router-dom

这里是项目仪表板图像

这是我的项目代码

 <Project  elevation={elevation1} setElevation={setElevation1} projectName="BMW S17" />

单个项目组件

 <Paper className={classes.pen} 
                style={{ background: 'linear-gradient(to right, #00b4db, #0083b0)' }}
                onMouseOut={ () => setElevation(1) }
                onMouseOver={ () => setElevation(5) }
                elevation={elevation}
                onClick={() => alert(`project clicked ${projectName}`)}
              >
                <Typography variant="h6" component="h3" className={classes.title}>
                    { projectName }
                </Typography>
                <Typography style={{ color: "#fff" }}>
                    Paper can be used to build surface.
                </Typography>
            </Paper>

这是我在 app.js 中的路线

 <BrowserRouter>
        <Switch>
            <Route path="/" exact component={Welcome} />
            <Route path="/login" exact component={Login} />
            <Route path="/signup" exact component={Signup} />
            <Main>
               <PrivateRoute exact path="/dashboard" component={Dashboard} />
               <PrivateRoute path="/profile" component={Profile} />
            </Main>
        </Switch>
      </BrowserRouter>

我的私人是..

export const PrivateRoute = ({ component: Component, ...rest }) => {
    return <Route 
     { ...rest }
     render={props => 
      localStorage.getItem('authToken') ? (
        <Component { ...props } />
      ) : (
          <Redirect 
            to={{ 
              pathname: "/login",
              state: { from: props.location }
          }} />
       )
      }
     /> 
}

标签： javascriptreactjsreact-router-dom

javascript - 如何从同一页面的不同部分单击基于按钮的同一页面中的动态组件？

问题描述

解决方案

推荐阅读