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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com