[英]React inline styles, applying styles from state
Using npm-inline-css
module, I'm trying to change certain page elements colors, when storing the styles in a state.使用
npm-inline-css
模块,当将样式存储在状态中时,我试图更改某些页面元素的颜色。 I set the state here:我在这里设置状态:
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
});
},
Then I'm trying to apply the styles to the component:然后我尝试将样式应用于组件:
render: function (){
return (
<div className="our-schools-app">
<InlineCss stylesheet="
& .button {
color: {{this.state.color}};
}
" />
<RouteHandler />
</div>
);
}
But they output like below.但他们输出如下。 How can I set the inline styles?
如何设置内联样式? Or a better way I can do this?
或者我可以用更好的方法来做到这一点?
<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color: {{this.state.color
}
}
;
}
</style>
From React Docs :来自React 文档:
In React, inline styles are not specified as a string.
在 React 中,内联样式未指定为字符串。 Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.
相反,它们由一个对象指定,该对象的键是样式名称的驼峰式版本,其值是样式的值,通常是一个字符串。
It looks like you're most likely trying to set styles for a button that exists in components that are rendered in RouteHandler.看起来您最有可能尝试为存在于 RouteHandler 中呈现的组件中的按钮设置样式。
If that's the case, it would make the most sense for you to create a wrapper that wraps the other components and accepts the styles you're trying to set.如果是这种情况,那么创建一个包装器来包装其他组件并接受您尝试设置的样式对您来说最有意义。
For example:例如:
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);
});
Edit: Per your request, as an example to show how nested routes would work, I added a Signup and Contact component.编辑:根据您的请求,作为展示嵌套路由如何工作的示例,我添加了一个注册和联系组件。 If you look at the routes variable you can see how I nested these components under PageWrapper.
如果您查看 routes 变量,您可以看到我如何将这些组件嵌套在 PageWrapper 下。
Now the nested routes /#/page/signup
and /#/page/contact
will both get access to the props that are added to the <RouteHandler />
of PageWrapper.现在嵌套的路由
/#/page/signup
和/#/page/contact
都可以访问添加到<RouteHandler />
的<RouteHandler />
的道具。 Hope this helps!!!!!希望这可以帮助!!!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.