Question

如何更改反应组件的样式？这会在背景颜色上出错，但在删除时会输出'hello' 我想根据反应中的对象的属性进行样式设计。

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

Answer 1

在React中，我们在指定所需的CSS样式名称时使用camelCase。

在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')
);

使用React设置对象属性的样式

1 个答案: