是否可以在自定义反应组件上设置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> }
}