react基础语法3：class与style属性

• 使用class

//在render函数里直接使用class会报错
//index.js:1 Warning: Invalid DOM property `class`. Did you mean `className`?at div
ReactDOM.render(<div class="box">dandan</div>, document.getElementById("root"))

在react里给元素设置class只能使用className进行设置

ReactDOM.render(<div className="box">dandan</div>, document.getElementById("root"))

• 使用style

//在render函数里直接使用style也会报错
//Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX
ReactDOM.render(<div style="color: red">dandan</div>, document.getElementById("root"))

在jsx里使用style样式需要基于一个样式对象来使用

ReactDOM.render(<div style={{color: 'red'}}>dandan</div>, document.getElementById("root"))