reactjs如何用对象设置样式而不是使用内嵌样式？

Question

这是我的代码：

ReactDOM.render(
    <h1 style = {{color:"red"}}>Foo</h1>,
    document.getElementById("root")
)

为什么会这样？^但这并不是：

var styles = {
    color:"red"
}
ReactDOM.render(
    <h1 style = {{styles}}>Foo</h1>,
    document.getElementById("root")
)

我想轻松设计样式，而不必每次创建新的DOM元素时都输入每个样式...

Answer 1

在渲染中使用单个括号。像这样：

ReactDOM.render(
    <h1 style = {styles}>Foo</h1>,
    document.getElementById("root")
)

style={{ styles }}无效的原因是因为它与style={{ styles: styles }}相同，styles传递的是具有<img>属性的对象，而不是实际你为它定义的样式。