react通过state的数据显示style多个样式（三目运算）

style={this.state.show?{background:"#e5effd",border:"1px solid #99C7F4"}:null}

react的普遍写法一个{}代表里面是一个可执行的代码块，className只有一个{}，而style之所以有两个{},是因为react里的style需要是一个对象，所以就多出了一个{}来包住样式属性，使其成为一个对象，所以当要实现多个行内样式，就是在正常写法的一个{}里面执行三目运算，将多个样式用{}包住，令其成为一个三目运算的结果，而另一个结果可以是''，null,{}
如果是异步请求数据，props还没有获取到数据，页面已经开始渲染了，因为props没数据导致的页面渲染报错undefined，也是通过三目运算来解决该问题

{
	Array.isArray(this.props.zLevelC)?
		<Select 
			style={{ width: 120, color: '#0061FF', margin: 5 }}
			defaultValue={this.props.zLevelC[0].indicatorName} 
			onChange={e => this.handleChange(e)}>
				{
					this.props.zLevelC.map((item,index) =>
						<Option key={index} value={item.indicatorCode} >{item.indicatorName}</Option>
					)
				}
		</Select>
	:null
}

上面的代码就是一个例子，zLevelC初始是一个空的对象{}，获取到数据后变成数组[],如果初始是空的对象，获取到数据后是对象，可以将

Array.isArray(this.props.zLevelC)

改成

Object.keys(this.props.zLevelC).length>0

要记住一点：代码都需要使用{}包住，不管是变量还是函数，上面的defaultValue用{}包住了变量，onchange包住了一个方法，select标签内部则是使用{}包住了一个map方法

多个class

className={`${styles.tableCell} ${styles.cell}`}
//或者
className={[styles.tableCell,styles.cell].join(' ')}

两个class

第一种
className={`${styles.tb} ${item.tbColor===null?styles.gray:item.tbColor=='RED'?styles.red:styles.green}`}
第二种
className={this.state.end=='left'?`${styles.idicatorList_left} ${styles.clickUseless}`:styles.idicatorList_left}

最后声明：我是菜鸟，对于react和js并不熟练，所以用词可能相当不严谨，所以不要太较真，明白大概意思就行，用词不当的话，见谅