React入门狂想曲（二）-JSX语法

来源：互联网发布：基站数据库下载编辑：程序博客网时间：2024/05/20 17:08

上一篇文章简单的用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开发一些模块或者组件上还是非常的方便的。而且开发起来也比较快速，难怪受企业开发者的追捧

阅读全文

0 0