上一篇文章简单的用react的JSX语法写了一个“Hello World!”程序,也介绍了不用JSX,用原生js的写法。总的来说。JSX是react的出彩之处。原声仅做理解和学习之用。
今天这篇文章我们继续深入的学习JSX。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实例一</title>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>这个作者</h1>
<h2>长的帅!</h2>
</div>
,
document.getElementById('example')
);
</script>
</body>
</html>
上面一个例子着重的点是,当我们的代码块包含多个标签的时候,必须要外层加一个div包裹它。不然要报错。这里可以总结出一个公式:
一个容器标签+逗号+目标容器。构成一个 ReactDOM.render函数。
还得注意的一点就是script标签的type类型为”text/babel”。
不变的代码我就省略了,直接看第二个例子
<script type="text/babel">
var i='帅哥'
ReactDOM.render(
<div>
<h1>{1+2}</h1>
<h1>{1}</h1>
<h1>{i}</h1>
</div>
,
document.getElementById('example')
);
</script>
运行结果
3
1
帅哥
JSX支持html和js混写。
<> 符号是html代码 ,
{} 是js代码。里面常量,变量,表达式,函数。都是可以写。
**唯一值得注意的是不能在直接在{}里写if 语句,但可以用三元表达式,还可以在函数里面写if语句。
下面来看第三个例子
var arr = [
<h1>努力奋斗</h1>,
<h2>就会放弃成为一名程序员</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
结果为:
努力奋斗
就会放弃成为一名程序员
所以不难总结出:当{}里变量为一个数组的时候,它会自动遍历加载。
我们再看看第三个例子:
var myStyle = {
fontSize: 20,
color: 'black'
};
ReactDOM.render(
<h1 style = {myStyle}>样式例子</h1>,
document.getElementById('example')
);
结果:
样式例子
所以可以用变量来设置内联样式,而且内联样式也是react推荐的写法。尽管我知道这有一点违背代码分离原则。这也算一个疑问吧,带着这个疑问,继续的学习。
总结:其实JSX的一些常用的,也介绍差不多,其实不难发现,其实用react开发一些模块或者组件上还是非常的方便的。而且开发起来也比较快速,难怪受企业开发者的追捧