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