在react中如何写内联样式
很多人写着React,随着业务变多,会有需求设置inline style:
● React里面,style不能写成string,而是定义为对象
● 对象的key是css样式名,采用小驼峰命名
具体使用如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 第一步: 先导入react库, 其中react-dom依赖react --> <script src="react.js"></script> <script src="react-dom.js"></script> </head> <body> <!-- 第二步, 视图中放置占位标签 --> <div id="app"></div> <!-- 第三步, 编写自己的js逻辑代码 --> <script> var styleObj = { color: 'red', fontSize: '30px', margin: '20px' }; // 使用React.createElement方法创建节点对象 var vDiv = React.createElement('div', { style: styleObj }, '你好, 我是小D') // 然后使用ReactDOM.render方法渲染 ReactDOM.render(vDiv, document.querySelector('#app')); </script> </body> </html>
本文来自React答疑栏目,欢迎学习!
以上就是在react中如何写内联样式的详细内容,更多请关注易知道|edz.cc其它相关文章!