Javascript 反应内联样式，从状态应用样式

使用

npm-inline-css

模块，我试图更改某些页面元素的颜色，将样式存储在一个状态中。我在这里设置状态：

setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;

    if(data) {
        headerStyles.backgroundColor = data.first_colour;
        headerStyles.color = data.theme;
    }
    this.setState({
        branding: data,
        headerStyles: headerStyles
    });
   },

然后我尝试将样式应用于组件：

  render: function (){
    return (
        <div className="our-schools-app">
          <InlineCss stylesheet="
            & .button {
                color: {{this.state.color}};
            }
            " />
            <RouteHandler />  
        </div>
    );
}

render:function（）{
返回(
);
}

但它们的输出如下所示。如何设置内联样式？还是一个更好的方法

<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color:     {{this.state.color
}

}
; 
}
</style>

#InlineCss-0.按钮{color:{{{this.state.color
}
}
; 
}

来自：

在React中，内联样式未指定为字符串。相反，它们是用一个对象指定的，该对象的键是样式名称的camelCased版本，其值是样式的值，通常是字符串

看起来您最有可能尝试为RouteHandler中呈现的组件中存在的按钮设置样式

如果是这种情况，那么创建一个包装器对您来说是最有意义的，它包装了其他组件并接受您试图设置的样式

例如：

var PageWrapper = React.createClass({
  setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;
    if(data) {
      headerStyles.backgroundColor = data.first_colour;
      headerStyles.color = data.theme;
    }
    this.setState({
      branding: data,
      headerStyles: headerStyles
    });
  },
  render: function () {
    var buttonStyle = {
      color: this.state.color
    }
    return (
        <RouteHandler buttonStyle={buttonStyle} />
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <RouteHandler />
        </div>
    );
  }
});

var Signup = React.createClass({
  render: function() {
    return (
      <div>
        <p> Click below to signup now! </p>
        <button style={this.props.buttonStyle}>Click Me!</button>
      </div>
    );
  }
});

var Contact = React.createClass({
  render: function() {
    return (
      <div>
        <p> Click the button below to contact us </p>
        <button style={this.props.buttonStyle}>Email Us!</button>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="page" handler={PageWrapper}>
      <Route path="signup" handler={Signup} />
      <Route path="contact" handler={Contact} />
    </Route>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

var PageWrapper=React.createClass({
setHeaderStyle:函数（数据）{
var headerStyles=this.state.defaultStyles；
如果（数据）{
headerStyles.backgroundColor=数据。第一种颜色；
headerStyles.color=data.theme；
}
这是我的国家({
品牌：数据，
headerStyles：headerStyles
});
},
渲染：函数（）{
var按钮样式={
颜色：this.state.color
}
返回(
);
}
});
var Index=React.createClass({
渲染：函数（）{
返回(
);
}
});
var Signup=React.createClass({
render:function（）{
返回(
点击下面注册

点击我！
);
}
});
var Contact=React.createClass({
render:function（）{
返回(
单击下面的按钮与我们联系

给我们发电子邮件！
);
}
});
变量路由=(
);
ReactRouter.run（路由、函数（处理程序）{
React.render（，document.body）；
});

编辑：根据您的请求，作为显示嵌套路由如何工作的示例，我添加了一个注册和联系组件。如果您查看routes变量，您可以看到我是如何将这些组件嵌套在PageWrapper下的

---

现在，嵌套路由

/#/page/signup

和

/#/page/contact

都可以访问添加到PageWrapper的

中的道具。希望这有帮助

看起来您正试图更改具有“button”类的DOM元素的样式，但没有在此组件中呈现该元素。在这个组件中呈现DOM元素不是更有意义吗？另外，如果你能发布你的路由也会很有帮助。谢谢你的回答，我该如何布局我的嵌套路由？嘿，刚刚添加了嵌套路由的示例。抱歉耽搁了，我在度假！