react 动态添加设置背景图和className

react 设置背景图

//首先引入需要的图片路径
import Background from '../../../images/login.jpg';
//(div.style.background  = `url(${Background}) no-repeat`;)
//定义背景样式

var sectionStyle = {
  width: "100%",
  height: "400px",
// makesure here is String确保这里是一个字符串，以下是es6写法
  backgroundImage: `url(${Background})` 
};

export default class Login extends Component{
//渲染页面
render(){
        return (
    <div style={sectionStyle}></div>
        )

    }

}

react 设置多个className

1.在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。

//比如说有一个固定样式"title":
<div className="title">标题</div>，
//然后还要一个点击高亮的样式:
<div className={index === this.state.active ? "active" : null}>标题</div>

2.ES6 模板字符串

<div className={`title ${index === this.state.active ? 'active' : ''}`}></div>

https://www.cnblogs.com/vali/p/6419636.html
https://segmentfault.com/q/1010000012522905