是否可以在自定义反应组件上设置className？

Question

比方说，我有一个简单的组件是这样的：

class SimpleComponent extends React.Component 
{ 
    render() { return <p>Some text</p> } 
} 

是否有可能一个className添加到SimpleComponent或者是这个限制为仅HTML DOM元素？

例如：

var mySimpleComponent = <SimpleComponent className="myComp"/> 

我想做到这一点，这样我可以风格我的自定义组件里面的元素，比如这样做的原因是：

.myComp > p { 
    background-color: blue; 
} 

Answer 1

可以，但你应该将道具传播到内部组件。如果没有，它不知道它。

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> } 
}