参见英文答案 >
Applying className/onClick/onChange not working on Custom React Component2个
假设我有一个像这样的简单组件：
假设我有一个像这样的简单组件：
class SimpleComponent extends React.Component
{
render() { return <p>Some text</p> }
}
是否可以向SimpleComponent添加className,或者仅限于HTML DOM元素？
例如：
var mySimpleComponent = <SimpleComponent className="myComp"/>
我想这样做的原因是我可以在我的自定义组件中设置元素的样式,如下所示：
.myComp > p {
background-color: blue;
}
解决方法
你可以,但你应该将道具传播到内部组件.如果没有,它就不知道了.
class SimpleComponent extends React.Component
{
render() { return <p className={this.props.className}>Some text</p> }
}
要创建要完成的CSS查询,则应在组件内创建div.
class SimpleComponent extends React.Component
{
render() { return <div className={this.props.className}><p>Some text</p></div> }
}
