如何在 React 中将多个浏览器特定值添加到 CSS 样式中？

这主要是为了给定的 CSS 属性定义浏览器特定值，如下所示：

<div style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">Grab me!</div>

如果我将它包装成这样的对象：

<div style={{
    cursor: "-moz-grab",
    cursor: "-webkit-grab",
    cursor: "grab"
}}>Grab me!</div>

然后您复制对象中的键（在严格模式下会失败，否则会覆盖）。并且简单地将所有值放入单个字符串中似乎也不起作用。

用 JS 找出浏览器，然后应用正确的值似乎工作量太大。或者是否有不同的方法来做到这一点？有任何想法吗？

如果您想使用内联样式并获得供应商前缀，您可以使用类似的库Radium为您抽象供应商前缀。

通过添加一个@Radium装饰器到您的组件，Radium 将挂钩您传递给组件的样式并自动管理它们并为其添加前缀。

var Radium = require('radium');
var React = require('react');

@Radium
class Grabby extends React.Component {
  render() {
    return (
      <div style={style}>
        {this.props.children}
      </div>
    );
  }
}

var style = {
  cursor: "grab" // this will get autoprefixed for you!
};