除了react +打字,实现这种行为的最好方法是什么?

import { Button, Card } from 'src/components';

const Page = () => (
  <div>
    <Card mx3 p3 flex justifyContentEnd>
      /* Card content */
    </Card>
    <Button my2 mx3>
      Login
    </Button>
  </div>
);

例如,mx3将水平增加16px的边距,my2将垂直增加8px的边距,等等,类似于Bootstrap框架使用类来轻松应用实用程序样式.

我查看了几个具有这种行为的组件库,以便找到合适的解决方案;然而,我发现大多数组件库都没有很强的类型支持.例如RNUILib、NativeBase、Magnus UI等.

推荐答案

你可以这样声明你的props :

const styles = ['mx3', 'p3', 'flex'] as const

type Styles = Record<typeof styles[number], boolean>;

然后像这样使用它们:

type CardProps = Styles & {
  other: 'props here'
}

现在,这应该会奏效:

<Card mx3 p3 flex />

你可以得到这样的应用props :

const values = Object.entries(props).map(([key, value]) => value ? key : null).filter(Boolean)

Javascript相关问答推荐

JS,当你点击卡片下方的绿色空间,而它是在它的背后转动时,

保持物品顺序的可变大小物品分配到平衡组的算法

如何在coCos2d-x中更正此错误

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

对路由DOM嵌套路由作出react

如何在不影响隐式类型的情况下将类型分配给对象?

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

为什么JPG图像不能在VITE中导入以进行react ?

向数组中的对象添加键而不改变原始变量

Phaserjs-创建带有层纹理的精灵层以自定义外观

匹配一个或多个可选重复的特定模式

在GraphQL解析器中修改上下文值

我为什么要使用回调而不是等待?

rxjs在每次迭代后更新数组的可观察值

为什么这个最小Angular 的Licial.dev设置不起作用?

Reaction:从子组件调用父组件中的函数

如何调用多个$HTTP.POST请求?

如何将Hedera帐户ID别名(十六进制)转换为Hedera帐户ID别名(仅限字符)?

解析JS中的UK格式日期字符串

当每行和每列中的正方形数量超过或超过4;时,我的网格中的正方形就会从容器溢出