React 组件样式的实现方式哪种更好? 大家都发表一下意见么

24 天前
huijiewei  huijiewei
function ToggleButtonRemastered({ isEnabled, children }) {
  return (
    <button
      className={clsx(
        isEnabled && "scale-110",
        "transition-transform duration-200 w-max text-xl"
      )}
    >
    {children}
  </button>
  )
}

function ToggleButtonClassicEdition({ isEnabled, children }) {
  return (
    <button
      data-enabled={isEnabled}
      className="data-[enabled=truel:scale-110 transition-transform duration-200 w-max text-xl"
    >
      {children}
    </button>
  )
}
1801 次点击
所在节点   React  React
16 条回复
liuw666
liuw666
24 天前
简单易懂,降低项目复杂度
FrankFang128
FrankFang128
24 天前
用 tailwind 就行了,别折腾
ltaoo1o
ltaoo1o
24 天前
建议第一种,我之前也是第二种写法,后面要在小程序实现相同的页面,代码改动比较多。
donaldturinglee
donaldturinglee
24 天前
做项目用 clsx 或 classnames 这种样式拼接方便维护, 自己项目的话, 你喜欢哪种用哪种
sjhhjx0122
sjhhjx0122
24 天前
第一种,简单直观是最好的
angrylid
angrylid
24 天前
第一种好吧,而且 className 类似的库不是应该可以这样写吗
clsx(
"transition-transform duration-200 w-max text-xl",
{ "scale-110": isEnabled } ,
)
importmeta
importmeta
24 天前
antd 和 mui 都是 clsx 这种形式
houshuu
houshuu
24 天前
站第一种
superedlimited
superedlimited
23 天前
nextjs 教程里使用的是 clsx ,相信 vercel🤖
rayi
rayi
23 天前
如果你的样式是使用 tailwind 这种方式添加的,那么选择第一种方式。
如果你是使用 css-modules 或者其他手动编码 css 的话,那么选择第二种方式。
yjw06282
yjw06282
23 天前
第二种又难读, 又难看, 不知道什么有啥存在意义
yjw06282
yjw06282
23 天前
要是觉得 css 太长,. 可以提上去

```
function ToggleButtonRemastered({ isEnabled, children }) {

const css = isEnabled ? 'scale-110' : 'transition-transform duration-200 w-max text-xl'
return (
<button className={css}>
{children}
</button>
)
}
```
okakuyang
23 天前
说句不好听的,我看不懂.... 我都是 className={ bool ? "xxx" : "xx" },楼主这样写有什么好处吗?
okakuyang
23 天前
或者
className={`xxx xx ${ bool ? "xx" : "" } ${ bool2 ? "xx": "" } `}
karott7
23 天前
第一种,可读性好太多
qwas
23 天前
之前还有的争,现在毫无疑问 tailwind

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1107170

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX