如何动态修改行间样式

组件的构造器constructor中数据

 constructor(props) {
    super(props);
    this.state = { 
      list: [
        {
          id:1,
          name:'Heney'
        },
        {
          id:2,
          name:'Linda'
        },
        {
          id:3,
          name:'John'
        }
      ]
    }
  }

render中定义空数组 classes=[],
classes.push(' ');向数组中插入样式,
判断
列表数据如果小于等于2 =>显示 'red'样式
列表数据如果小于等于1 =>显示 'bold'样式
join(" ")转换字符串

render(){
   const classes = []
    if (this.state.list.length <= 2) {
      classes.push('red');
    }
    if (this.state.list.length <= 1) {
      classes.push('bold');
    }
}

 return ( <p className={classes.join(" ")}>Hi,React App</p>);

在App.css 中定义样式

.red{
  color: red;
}
.bold{
  font-weight: bold;
  color: green;
}