个人中心
gpt4 book ai didi

javascript - 在 React 中编写可重用模式的最佳方法是什么？

转载 作者：行者123 更新时间：2023-12-04 14:48:06 25 4
gpt4 key购买 nike

<分区>

我正在用 React + Material UI 编写一个应用程序。我的应用程序中的不同页面上有一些操作使用模态，而不是在每个页面上使用 Material UI 的对话框，我定义了一个全局模态上下文，它可以更改状态以显示并用其他 Prop 填充模态。现在我的问题是——渲染这些 Prop 的标准做法是什么？比如，与简单操作相比，我应该在什么时候决定为让我们说的表单创建一个单独的模式/对话框？或者如果我使用条件从那个 Modal 中渲染任何东西是否正确？例如考虑以下示例:

<DialogContent>
                <DialogContentText>
                    {modalTypeDefaults.text}
                </DialogContentText>
                <DialogContentText sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: '5px'
                }}>
                    {
                        (modalTypeDefaults.type === 'user')
                            ? <UserInfoCellComponent displayName={modalProps.displayName} imageURL={modalProps.fkImageIdAvatar} username={modalProps.username.toLowerCase()} />
                            : (modalTypeDefaults.type === 'post')
                                ? <Box>
                                    <Typography>Title: {modalProps.title.toUpperCase()}</Typography>
                                    <Typography>Id: {modalProps.id}</Typography>
                                  </Box>
                                : (modalTypeDefaults.type === 'event')
                                    ? <Box
                                            sx={{
                                            alignItems: 'center',
                                            display: 'flex'
                                            }}
                                        >
                                            <Avatar
                                            src={modalProps.fkImageId}
                                            sx={{ mr: 2 }}
                                            />
                                            <Typography
                                            color="textPrimary"
                                            variant="body1"
                                            >
                                            <a href={modalProps.urlWebsite}>{modalProps.name}</a>
                                            </Typography>
                                      </Box>
                                    : ''
                    }
                </DialogContentText>
</DialogContent>

是否有标准做法？我环顾四周，发现了极其多变的答案。什么对性能更好？

25 4 0
文章推荐： opengl - 有没有办法在用三角形带绘制的网格上实现类似行进正方形的东西？
文章推荐： sql - 当数据库表中的字段与 DB2 中的 SQL 关键字相同时，从数据库表中选择字段时出现问题
文章推荐： python - 如何完全按照显示的字体呈现字体？
文章推荐： reactjs - 在子组件中使用 DropDown 的 React-Final-Form，如何？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com