时间戳

首页 > 解决方案 > React how to：点击时只替换一个组件（动态 UI）

html - React how to：点击时只替换一个组件（动态 UI）

问题描述

使用 react.js 我想制作一个动态 UI，我有这样的东西：

<div>
  <appbar component />
  <drawer (sidebar) comopnent /> <!-- <--has buttons -->
  <content component> <!-- <-- component to replace or re-render -->
  <footer component>
</div>

然后我尝试使用状态来保存和更改“”，如下所示：

 const [renderView, setRenderView] = useState("<Home />");

/* onclick call this function and pass referenced component ej: <reports /> */

function changeContent(view){ 
        setRenderView(view);

        return(
         <Suspense fallback={renderLoader()}>
            {view}
        </Suspense>
        );

    }

现在，如何用新的替换“内容组件”？

感谢您的意见。

标签： htmlreactjs

解决方案

我是根据建议做出的，它的工作原理，但我不使用类只是函数

功能仪表板（道具）{

/* lazy loading */
const renderLoader = () => <p>Loading...!?¡?</p>;

/* lazy components */
const Initial = () => (
  <Suspense fallback={renderLoader()}>
      <InitialComponent />
  </Suspense>
)
const Reports = () => (
    <Suspense fallback={renderLoader()}>
        <ReportsComponent />
    </Suspense>
)
const Cards = () => (
  <Suspense fallback={renderLoader()}>
      <CardsComponent />
  </Suspense>
)

/* set view state */
const [renderView, setRenderView] = useState(Initial());

function changeContent(view){
    setRenderView(view);

}

const test = (cosa) => {
  console.log(cosa);
}

/* style things*/
const classes = useStyles();
const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);

return (
    <div className={classes.root}>
    <CssBaseline />
    <UIappbar />
    <UIsidebar />
    <main className="contentWrapper">
        <Grid container spacing={3}>
            <Grid item xs={12} md={8} lg={9}>
            <div>
                <Button onClick={() => changeContent(Reports())}>Reports view</Button>
            </div>
            <div>
                <Button onClick={() => changeContent(Cards())}>Cards view</Button>
            </div>
            </Grid>
            <Grid item xs={12} md={8} lg={9}>
                <Paper className={fixedHeightPaper}>
                {renderView}
                </Paper>
            </Grid>
        </Grid>
    </main>
    </div>
);

}

现在我需要调用具有更改 {renderView} 方法的“changeContent()”需要从不知道如何在没有类格式的情况下传递道具的孩子那里调用它（我只使用函数）

我应该更改为具有构造函数格式的类吗？

推荐阅读