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

Question

这主要是为了定义给定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，然后应用正确的值似乎太麻烦了.. 或者有其他方法吗？有什么想法吗？

- Sherzod

---

我猜你需要它作为一个字符串... var style = 'cursor: "-moz-grab", cursor: "-webkit-grab", cursor: "grab" '; return <div style={style}>抓住我！</div> 或许不是最好的方法，但我想不到其他更好的办法了。 你也应该看一下autoprefixer https://github.com/postcss/autoprefixer - alexmngn

@alexmngn：在React中，你不能将样式作为字符串传递...它只能是对象，不是吗？ - Sherzod

Answer 1

如果您想使用内联样式并获得供应商前缀，可以使用像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!
};

- Interrobang

---

我同意。自动添加前缀最好由你的构建工具来完成。 - aleksblago

Answer 2

你最好的做法是创建一个带有光标属性的CSS类，并将其添加到你的组件中。

.container {
  height: 10px;
  width: 10px;
}

.grab {
  cursor: -moz-grab,
  cursor: -webkit-grab,
  cursor: grab,
}

然后在你的React组件中：

var isGrabEnabled = true;

<div className={['container', (isGrabEnabled ? 'grab' : '')]}>Grab me!</div>

- alexmngn

---

是的，那是我现在采用的解决方法，但这并不是 React 的设计理念...据我所知，一切都应该是自包含的，这也是我一直在尝试做的 :) - Sherzod