React.js - Rendern von Komponenten mit unterschiedlichen Stile basierend auf Requisiten

Question

Also lassen Sie uns sagen, dass ich ein einfaches Web-Layout erschaffe, wo ich eine Rückmeldung Komponente über dem MainContent Komponente haben, wie so:

class WebLayout extends Component { 
    render() { 
    <div> 
     <Header /> 
     <FeedBackMessage 
     shouldRenderMessage={true} 
     typeMessage={"error"} 
     message={"Wrong input!"} 
     /> 
     <MainContent /> 
    </div> 
    } 
} 

Und lasst uns angenommen, dass ich verschiedene Arten von Nachrichten habe, wie error, warning, success.

Im Inneren des FeedBackMessage, kann ich etwas als so haben:

class FeedBackMessage extends Component { 
    renderMessage(){ 
    const {shouldRenderMessage, typeMessage, message } = this.props; 
    if (shouldRenderMessage === true){ 
     <div> 
     {message} 
     </div> 
    } 
    } 
    render(){ 
    return (
     <div> 
     {this.renderMessage().bind(this)} 
     </div> 
    ) 
    } 
} 

Ich bin ratlos, wie ich FeedBackMessage Styling basierend auf typeMessage prop Wert machen kann.

Zum Beispiel, wenn ich typeMessage mit "Fehler" übergebe, möchte ich die FeedbackMessage Komponente mit einem roten Rahmen Styling haben. Oder wenn ich confirm passiere, würde ich gerne mit grünem Rand rendern.

Answer 1

Dies alles ist sehr abhängig von Ihrer Styling-Lösung.

Wenn Sie Inline-Styles verwenden möchten könnte es etwa so aussehen:

class FeedBackMessage extends Component { 
    renderMessage(){ 
    const {shouldRenderMessage, typeMessage, message } = this.props; 
    if (shouldRenderMessage === true){ 
     <div> 
     {message} 
     </div> 
    } 
    } 
    render(){ 
    const componentStyle = { 
     error: { border: "1px solid red" }, 
     confirm: { border: "1px solid green" } 
    }[this.props.typeMessage]; 

    return (
     <div style={componentStyle}> 
     {this.renderMessage().bind(this)} 
     </div> 
    ) 
    } 
} 

Wenn Sie mit Stylesheets stylen möchten, können Sie so etwas wie classnames verwenden Klassen zu wechseln, basierend auf einem gewissen Logik und fügen Sie dann die Klasse Ihre Komponente hinzu.

class FeedBackMessage extends Component { 
    renderMessage(){ 
    const {shouldRenderMessage, typeMessage, message } = this.props; 
    if (shouldRenderMessage === true){ 
     <div> 
     {message} 
     </div> 
    } 
    } 
    render(){ 
    const componentClass = classNames('FeedBackMessage', { 
     "error": this.props.typeName === 'error', 
     "confirm": this.props.typeName === 'confirm' 
    }); 

    return (
     <div className={componentClass}> 
     {this.renderMessage().bind(this)} 
     </div> 
    ) 
    } 
} 

Und ein Stylesheet haben etwa so:

.FeedBackMessage .error { 
    border: 1px solid red; 
} 

.FeedbackMessage .confirm { 
    border: 1px solid green; 
}