前端初学者,目前在学习 material-ui 的使用,遇到如下问题 例如一个 Grid
<Grid
container
direction="row"
justifyContent="center"
alignItems="center"
/>
经过 prettier 格式化后,参数占用了太多行,导致结构看起来不清晰,我希望把 container,direction 等参数移动到其他文件里,如
<Grid class={"grid-root"}/>
grid-root: {
container
direction="row"
justifyContent="center"
alignItems="center"
}
目前看到的办法
一个是自定义<Mygrid>,这种的问题是 grid 比较多的话需要自定义很多 grid,改起来不好改,
一个是用 material-ui 自带的 makeStyles,但是好像只能使用 css 的参数,我更想使用 material 的参数。
想请教正式项目中如何处理这一类问题。
1
wobuhuicode 2021-08-15 22:37:48 +08:00
```
<Grid container direction="row" justifyContent="center" alignItems="center" /> ``` => ``` const p = { container:"container", direction:"row", justifyContent:"center", alignItems="center" } <Grid {...p} /> ``` |
2
CharlesOfBit OP @wobuhuicode 这种写法在 ts 下报类型错误
``` Type 'string' is not assignable to type 'GridItemsAlignment | undefined'. TS2769 25 | <div> > 26 | <Grid | ^ 27 | {...p} ``` |
3
CharlesOfBit OP 或者说,大家在实际开发中,碰到类似的问题,是怎么解决的,难道都要忍受这个超长的参数列表吗
|
4
CharlesOfBit OP 问题已解决,方法是 p 加类型`GridProps`
|
5
Trim21 2021-08-16 08:04:56 +08:00 via Android
如果只是觉得不好看的话,换掉 prettier 不就好了…
|
6
wobuhuicode 2021-08-16 09:22:12 +08:00
@CharlesOfBit 是的,增加类型描述。粗暴点加个 as any 也可以
{...(p as any)} |
7
CharlesOfBit OP @Trim21 不好换呐,我是初学者,需要 prettier 来规范代码,否则会写的乱七八糟。
|
8
HCT1 2021-08-16 13:42:43 +08:00
@CharlesOfBit 以 react 和 vscode 的 py 关系,tsx 完全可以用 vscode 自带的 formatter 来格式化啊,设置里搜 format,可配置项不比 prettier 少
|
9
TimPeake 2021-08-17 08:53:49 +08:00
prettier 可以配置参数换行的。这种属性参数换行,其实是比较合理的格式方法,只是你个人不太喜欢。
可以百度下配置 把 超出换行格式化 设置大点 |
10
maxin6 2021-10-29 09:54:13 +08:00
如果不想配置 prettier ,可以在不想被 format 的代码上加上一行注释:// prettier-ignore ,这样 prettier 就会忽略这个注释的下一行代码。
|