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

小编典典

reactjs

假设我有一个像这样的简单组件：

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

阅读 541

2020-07-22

共1个答案

小编典典

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

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

2020-07-22