Ist es möglich, einen Klassennamen für benutzerdefinierte Reaktionskomponenten festzulegen?

Question

Lassen Sie uns sagen, dass ich eine einfache Komponente wie dieses:

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

Ist es möglich, ein className zu SimpleComponent hinzuzufügen, oder ist dies nur in HTML-DOM-Elemente beschränkt?

Zum Beispiel:

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

Der Grund Ich mag würde dies tun, so dass ich die Elemente innerhalb meiner benutzerdefinierten Komponente diese Art mögen kann:

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

Answer 1

können Sie, aber Sie sollten propagieren die Stütze auf die innere Komponente. Wenn nicht, weiß es nichts davon.

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

Um die CSS Abfrage, die Sie erreichen möchten machen, dann sollten Sie die div in Ihrer Komponente erstellen.

class SimpleComponent extends React.Component 
{ 
    render() { return <div className={this.props.className}><p>Some text</p></div> } 
}