リアクタを使用したオブジェクトプロパティのスタイリング

Question

リアクションコンポーネントのスタイルを変更するにはどうすればよいですか？ これはバックグラウンドカラーでエラーになりますが、削除すると 'hello'が出力されます 反応しているオブジェクトのプロパティに基づいてスタイルを設定します。

if(this.state.msg[0].msg.author.name == 'Rich){ 
     background-color: red; 
     console.log('hello') 
     }; 

Answer 1

実際には、希望するCSSスタイル名を指定するときにcamelCaseを使用します。

Inでは、インラインスタイルは文字列として指定されていません。代わりに、彼らは はここ

https://facebook.github.io/react/tips/inline-styles.html

そのキー のcamelCase形式のバージョンであるオブジェクトにスタイル名を指定しているあなたは条件付き状態に保つ値に応じてスタイルを適用できるかのデモです： http://codepen.io/PiotrBerebecki/pen/xEyqER

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     msg: [ 
     {msg: {author: {name: 'Rich'}}}, 
     {msg: {author: {name: 'John'}}}, 
     {msg: {author: {name: 'Pete'}}} 
     ] 
    }; 
    } 

    render() { 

    const style1 = { 
     backgroundColor: 'red' 
    }; 

    const style2 = { 
     backgroundColor: 'blue' 
    }; 

    const style3 = { 
     backgroundColor: 'gray' 
    }; 

    const getStyleName = (name) => { 
     switch (name) { 
     case 'Rich': 
      return style1; 
     case 'John': 
      return style2; 
     default: 
      return style3; 
     } 
    }; 

    const renderNames = this.state.msg.map((item, index) => { 
     return (
     <p key={index} style={getStyleName(item.msg.author.name)}> 
      {item.msg.author.name} 
     </p> 
    ); 
    }) 

    return (
     <div> 
     <h1>React</h1> 
     {renderNames} 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);