React动态添加class和style

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

code.juejin.cn/pen/7137943…

Vue下Class与 Style 绑定

Class与 Style 绑定

Class绑定

绑定对象	语法
对象	classObject：在data中定义为一个对象。 classObject: { active: true, 'text-danger': false }
数组

Style绑定

绑定对象	语法
对象
数组

React下Class与 Style 绑定

Class绑定

绑定对象	语法
对象	<li className={this.isRed ? 'green' : ''}>6
数组	<li className={['red', this.isRed ? 'radius' : ''].join(' ')}>4
函数	{this.getStyles()}

Style绑定

绑定对象	语法
对象	<li style={{border: '1px solid red'}}>111
函数	{this.getStyles()}

import React, { Component} from 'react';
import ReactDom from 'react-dom';


class ClassNameStyle extends Component {
  constructor(props) {
    super(props);
    this.isRed = true;
  }

  getStyles() {
    if(this.isRed) {
      return (<li style={{border: '1px solid #ccc'}}>11</li>);
    }else {
      return (<li style={{border: '1px solid red'}}>111</li>);
    }
  }

  render() {
    return (
      <div>
        <ul>
          {this.getStyles()}
          <li>1</li>
          <li className="green radius">2</li>
          <li>3</li>
          <li className={['red', this.isRed ? 'radius' : ''].join(' ')}>4</li>
          <li>5</li>
          <li className={this.isRed ? 'green' : ''}>6</li>
        </ul>
      </div>
    );
  }
}

ReactDom.render(<ClassNameStyle />, document.getElementById('app'));     

对比结论

• 相同点：

1. 都是在html模板上进行，样式操作。style或者class。
2. 可以在语法解析中使用三元表达式。
3. 支持对象、数据和函数形式的语法绑定。【Vue中我们也可以使用计算属性或者methods】

• 区分点：

1. React中，class绑定，必须使用className的关键字进行样式绑定。
2. React中，class绑定使用数组形式时，我们在结尾处，使用join()方法，进行数组的切割。
3. React中，style的绑定，我们使用了两个{{}}。

总结

虽然为不同的框架，但是本源，都是给html，添加style或者class样式。掌握其根本，就可以解决问题了。