Стилирование объекта с использованием React

Question

Как изменить стиль реагирующего компонента? Это будет ошибка цвета фона, но при удалении она выведет 'hello' Я хочу стиль, основанный на свойстве в объекте в реакции.

Answer 1

В Реагировании мы используем camelCase при указании желаемых имен стиля CSS.

In React, встроенные стили не указаны в виде строки. Вместо этого они указаны с объектом, ключом которого является версия camelCased из имя стиля https://facebook.github.io/react/tips/inline-styles.html

Вот демо, как можно условно применить стили в зависимости от значений сохраняется в состоянии: 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') 
);