是否可以在自定義反應組件上設置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> } 
}