React.js - 小道具

Question

に基づいて異なるスタイルを持つコンポーネントをレンダリングそれでは、私はそうと、私はMainContentコンポーネント上記フィードバックメッセージのコンポーネントを持つシンプルなWebレイアウトを作成していましょう：

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

としてみましょうerror、warning、successなど、さまざまな種類のメッセージがあるとします。

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

私はtypeMessage小道具値に基づいてFeedBackMessageスタイリングをレンダリングすることができますどのように困惑しています：

FeedBackMessageの内部では、私はそう何かを持っていることがあります。

たとえば、typeMessageに「エラー」を渡した場合、FeedbackMessageコンポーネントの赤い境界線のスタイリングが好きです。またはconfirmを渡すと、緑の枠線でレンダリングしたいと思います。

Answer 1

これはすべてあなたのスタイリングソリューションに大きく依存しています。あなたがをインラインスタイルを使用する場合は

それは次のようになります。

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

を使用すると、スタイルシートとスタイルにしたい場合は、いくつかのロジックに基づいて授業を切り替えるにはclassnamesようなものを使用することができますコンポーネントをクラスに追加します。

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

そしてそうのようなスタイルシートがあります。入力用

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

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