3

我在这里有一个沙箱：

https://codesandbox.io/s/p2wy9pp8lx

我有一些像这样的动态样式：

const styles = {
  fooDisplay: props => ({
    display: props.variant === "foo" ? "block" : "none"
  }),
}

对于像这样的课程：

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <div> variant is : {variant}</div>
      <div className={classes.fooDisplay}>I only display if variant is foo</div>
    </div>
  );
};

这就是我想要的。

使用字符串比较是实现这一目标的正确方法吗？还是这对性能不利？

4

1 回答 1

1

在我看来，最佳实践是在每个元素上导出变量常量，以便在导入元素时引用这些常量，示例如下所示：

<Button variant={Button.Variant.PRIMARY}> This is a primary button </Button>

在 Button 上，您可以使用相同的常量进行检查this.props.variant === Variant.Primary

字符串比较没有真正的性能问题，它只是一种获得相同解决方案的弱类型方法，而且看起来有点混乱。这种方法意味着没有错误的余地，并且非常清楚意图是什么。

如果您需要更多代码来理解我的意思，请告诉我

于 2018-09-20T05:29:17.430 回答