04、react之 JSX中使用样式

来源：互联网发布：百慕大水下金字塔知乎编辑：程序博客网时间：2024/05/23 23:42

1、JSX中使用样式
1、行内样式：写行内样式的时候需要使用两个{} ==>{{}}
2、对象样式：在return前面定义一个样式对象，注意样式的写法，与HTML的不同点
  3、CSS样式（最常用）

  注意事项，在HTML5中与在React中的样式的书写区别：
  1、HTML5中以;结束
    在React中以,结束
  2、在HTML5中属性与值都不需要加上引号
    在React中，属于javascript对象，key中不能存在 - ,需要使用驼峰命名，如果是value值，需要加上引号
  3、在HTML中，设置带数字的值，宽度，高度==，需要带上单位

在React中可以不用带单位，直接写数字这里是指那些规定了默认单位的值。比如说像素px，如果要使用em或者是rem则需要加上单位

其他注意事项：

{} 插值符号 (例如写行内style样式的时候为啥要用{{}})
在使用插值符号的时候，里面需要时一个对象或者是一个表达式

<!DOCTYPE html><html lang="en"><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>在JSX语法中设置样式</title>    <style>        .details {            color: blueviolet;            font-size: 20px;        }    </style>    <script src="js/react.min.js"></script>    <script src="js/react-dom.min.js"></script>    <script src="js/browser.js"></script></head><body>    <div id="app"></div>    <script type="text/babel">        /*            {} 插值符号            在使用插值符号的时候，里面需要时一个对象或者是一个表达式        */        var HelloWorld = React.createClass({            render:function(){                var styles = {                    color: 'blue',                    fontSize: '30'                }                return (                    <div className="box">                        <h3 className="title" style={{color:'red',backgroundColor:'lime'}}>默认标题</h3>                        <p className="subtitle" style={styles}>说明</p>                        <p className="details">这个是用来教学的案例</p>                    </div>                )            }        })        ReactDOM.render(<HelloWorld/>,document.getElementById("app"))    </script></body></html>

阅读全文

0 0