字符串比较是 React-JSS 中变体动态样式的正确方法吗?

Question

我这里有一个沙盒：

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>
);
};

这做了我想要的。

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

Answer 1

在我看来，最佳做法是导出每个元素上的变量常量，您可以在导入元素时引用这些常量，示例如下所示：

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

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

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

如果你需要更多的代码来理解我的意思，让我知道