javascript - 在 ReactJS 中将连字符写为样式对象时处理 css 样式中的连字符

Question

我有这样的 css 样式:

.AdvancedSearchGrid {
    width: 70%; 
    margin: auto;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

我似乎找不到一种方法来编写那些以连字符开头的部分，即 (-webkit-flex, -moz-box, -ms-flexbox, -webkit-flex) 以它们应该编写的格式在 JSX 中，我们应该使用 CamelCase。例如

list-style: none 将是 listStyle: 'none',

但是我应该如何以 JSX 方式输入我提到的那些行？

我什至不知道如何调用它们，所以很难用 Google 搜索。

Answer 1

这里有两个不同的问题:

1- 对于 -webkit-flex-flow: row wrap;，您可以简单地使用 WebkitFlexFlow: 'row wrap'，如 docs 中所述

2- 为

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

你可能必须使用库，因为 React 不支持自动前缀:

看看这个answer