[JavaScript知识库]react第二天jsx语法

一、jsx语法

1、JavaScript与xml

在js里边编写html 两者进行混写，并且html不需要加引号。

2、jsx的特点：

类xml语法容易被接受，结构清晰。

增强js语义。

抽象度高，屏蔽DOM操作，跨平台。

代码模块化。

列如：

<div id="app"></div>
</body>
<script type="text/babel">
  ReactDOM.render(
    <h1>react</h1>,
    document.getElementById("app")
  )
</script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

二、react动态渲染

在react中我们可以使用单括号{变量名}来动态渲染数据

列如：

???var?num=1

????????????????????ReactDOM.render(

????????????????????????<div>{num}</div>

????????????????????)

????????????????在react中{}?里边是一个js运算环境

注意：

????????????????在react中不能使用if?else条件判断语句??需要使用三元运算符(三目运算符)

????????????????进行替代。

 <div id="app"></div>
    <script type="text/babel">
        // // 数组
        // var arr=[
        //     <h1>这是标题</h1>,
        //     <h2>这是一个小标题</h2>
        // ]
        // // Number
        // var num=123
        // // String
        // var str1='hello world'

        // // 对象(Object)
        // var obj={
        //     name: '张三',
        //     age: 16
        // }
        // var bool=false


        // ReactDOM.render(
        //     <div>{arr}--{num}--{str1}--{obj.name}--{obj.age}--{bool===true?1:2}</div>,
        //     document.getElementById('app')
        // )

当需要动态渲染两个样式时，我们可以使用

var myStyle={
            color: 'blue',
            fontSize: '25px'
        }
        var test1={
            fontWeight: 'bold'
        }

        ReactDOM.render(
            <div style={{...myStyle, ...test1}}>你好</div>,
            document.getElementById('app')
        )
    </script>

三、jsx里边进行运算

?如果在编写react的时候??元素在渲染时候不想再两个或者多个相邻dom节点外边再加一个新的dom节点这个时候我们可以使用?React.Fragment?作为当前所有子元素的共同父元素?进行渲染?该标签不会在html里边被渲染出来??他的作用跟vue中template相似。

???????????例如：

????????????????<React.Fragment>

????????????????????<p>内容1</p>

????????????????????<span>新的内容</span>

????????????????</React.Fragment>

????????????????渲染出来的结果是：

????????????????????<p>内容1</p>

????????????????????<span>新的内容</span>

????????????????????React.Fragment不会作为html标签被渲染

?????? ? ? ? ? ?react没有类似于vue中指令这个东西。

假如我们需要在react中对学生的成绩进行判断：

???大于等于60?小于70??及格

????小于60???不及格

????大于等于70?小于80??良好

????大于等于80?优秀

var score=60
 ReactDOM.render(
        <React.Fragment>
            <div className="result">
                {score>=60 && score<70 ? '及格' : score>=70 && score<80 ? '良好' : 
                score>=80 ? '优秀': '不及格'}
            </div>
            <p>123</p>
        </React.Fragment>,
        document.getElementById('app')
    )

当我们在react中动态渲染图片时

 var src='https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1401878636,1957300882&fm=58'
 ReactDOM.render(
        <React.Fragment>
            <img src={src} alt="" />
        </React.Fragment>,
        document.getElementById('app')
    )

src={src}不需要加引号。