react第二天jsx语法

最新推荐文章于 2022-10-04 16:32:08 发布

我在哪都是

最新推荐文章于 2022-10-04 16:32:08 发布

阅读量188

点赞数

本文链接：https://blog.youkuaiyun.com/m0_56687211/article/details/119579841

版权

本文详细介绍了React中的JSX语法，包括JSX与JavaScript和XML的关系、特点以及如何进行动态渲染。在React中，可以使用大括号{}进行数据绑定和动态渲染，但不支持if-else语句，需要使用三元运算符。jsx内还允许进行运算，并介绍了React.Fragment的使用，以避免多余的DOM节点。同时，文章提到在渲染图片时，src属性可以直接绑定变量，无需引号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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(

)

在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>

</React.Fragment>

渲染出来的结果是：

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}不需要加引号。