如何为React组件创建类似Bootstrap的速记 prop ？

1l5u6lss 于 2022-12-04 发布在 React

关注(0)|答案(2)|浏览(194)

与React + TypeScript沿着实现此行为的最佳方式是什么？

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

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

例如，mx3将水平添加16 px边距，my2将垂直添加8 px边距，等等，类似于Bootstrap框架如何使用类来轻松应用实用程序样式。
为了找到合适的解决方案，我已经浏览了一些具有这种行为的组件库;然而，我发现大多数都没有很强的类型支持。例如RNUILib，NativeBase，Magnus UI等等。

react-native

来源：https://stackoverflow.com/questions/74630191/how-to-create-bootstrap-like-shorthand-props-for-react-components

2条答案

按热度按时间

zbdgwd5y1#

你可以这样声明你的 prop ：

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

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

然后像这样使用它们：

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

现在，这应该行得通：

<Card mx3 p3 flex />

你可以得到这样的应用 prop ：

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

赞(0）回复(0）举报 2022-12-04

xoshrz7s2#

如果你看到react-bootstrap的源代码，他们已经使用classnames包的util函数将booleanMap到某个CSS类。

...
...
        <Component
          {...buttonProps}
          {...props}
          ref={ref}
          className={classNames(
            className,
            prefix,
            active && 'active',
            variant && `${prefix}-${variant}`,
            size && `${prefix}-${size}`,
            props.href && props.disabled && 'disabled',
          )}
        />
...
...

赞(0）回复(0）举报 2022-12-04

我来回答

如何为React组件创建类似Bootstrap的速记 prop ？

2条答案

相关问题

热门标签

最新问答