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

最新推荐文章于 2022-07-29 09:00:17 发布

张春元

最新推荐文章于 2022-07-29 09:00:17 发布

阅读量279

点赞数

分类专栏： React入门系列文章标签： react-js react入门 react教程

本文链接：https://blog.csdn.net/zcy199303/article/details/78470239

版权

React入门系列专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上一篇文章简单的用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

收藏

觉得还不错? 一键收藏
0
评论
React入门狂想曲（二）-JSX语法

上一篇文章简单的用react的JSX语法写了一个“Hello World!”程序，也介绍了不用JSX，用原生js的写法。总的来说。JSX是react的出彩之处。原声仅做理解和学习之用。今天这篇文章我们继续深入的学习JSX。。。。。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>实例一</title>
复制链接

扫一扫