文档章节

React的JSX语法

o
 osc_4nmshwhm
发布于 2018/08/07 01:08
字数 772
阅读 11
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

一、概念

①HTML语言直接写在JavaScript语言中,不加任何引号,这就是JSX语法。它允许HTML和JavaScript混写

JSX是一种 JavaScript 的语法扩展。 它完全是在 JavaScript 内部实现的。用来声明 React 当中的元素

<div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        ReactDOM.render(<h1>hello world</h1>,document.getElementById('app'))
    </script>

二、环境配置

①非模块化环境:babel-standalone,执行时编译,速度比较慢,只适用于开发环境测试

②模块化环境:结合webpack配置babel响应的工具完成预编译,浏览器执行的是预编译的结果,

③babel REPL 环境:https://babeljs.io/repl

三、基本语法规则

①必须有一个根节点

<div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const element = (
            <div>
                <h1>hello world</h1>
                <p>hello react</p>
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

换行或者多标签,推荐加括号,避免JavaScript自动分号不往后执行的问题

<div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        function getEl() {
            return (
                <div>
                    <h1>hello world</h1>
                    <p>hello react</p>
                </div>
            )
        }
        ReactDOM.render(getEl(),document.getElementById('app'))
    </script>

③单标签必须以 /> 结束

<script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        function getEl() {
            return (
                <div>
                    <b />hello react
                </div>
            )
        }
        ReactDOM.render(getEl(),document.getElementById('app'))
    </script>

④在JSX中嵌入JavaScript表达式:遇到 < 按html解析,遇到 { 按JavaScript解析

<div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const user ={
            name:'eric',
            age:18,
            gender:0
        }
        const element = (
            <div>
                <h3>姓名:{user.name}</h3>
                <h3>年龄:{user.age}</h3>
                <h3>性别:{user.gender}</h3>
                <h3>三元表达式:{user.gender === 0 ? '': ''}</h3>
                <h3>数字相加:{ 1 + 1}</h3>
                <h3>字符串拼接:{'hello' + 'world'}</h3>
                <h3>es6字符串拼接:{`hello' ${user.name}`}</h3>
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

⑤注释:推荐单行注释

<div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const element = (
            <div>
                <h3>hello</h3>
                {
                    //注释1
                    //注释2
                }
                <h3>hello</h3>
                {/*注释3*/}
                <h3>hello</h3>
                {
                    /*注释4*/
                    /*注释5*/
                }
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

⑥在JavaScript中嵌入JSX

<div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const user ={
            name:'eric',
        }
        function getHi(user) {
            if (user) {
                return <h1>hello {user.name}</h1>
            }
            return <h1>hello world</h1>
        }
        const element = getHi(user)
        //const element = getHi()
        ReactDOM.render(element,document.getElementById('app'))
    </script>

⑦JSX中的节点属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSX语法</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const user ={
            name:'eric',
        }
        // 绑定属性值,有些关键字冲突,需要修改名字,比如,class改为className,for改为hmtlFor
        // 在属性中使用表达式,不使用“”,否则会渲染会字符串
        const element = (
            <div className='box' title={user.name}>
                <laber htmlFor='name'>姓名</laber>
                <input type='text' id='name' />
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>
</body>
</html>

 

上一篇: iotop
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

在C#中调用基本构造函数 - Calling the base constructor in C#

问题: If I inherit from a base class and want to pass something from the constructor of the inherited class to the constructor of the base class, how do I do that? 如果我从基类......

富含淀粉
19分钟前
7
0
用Python构建个性化智能闹钟

作者|Kumar Shubham 编译|VK 来源|Towards Data Science 你可能之前有见过有人使用Python语言构建闹钟,帮助他唤醒或提醒他一个重要的会议。 这些都是很简单,没有任何智能,他们所做的只是播...

人工智能遇见磐创
28分钟前
12
0
前端学数据结构与算法(二):数组与栈

前言 数据结构与算法有相互依存的关系,如果将这个两个又进行划分,无疑数据结构又是这座大厦的基础。首先从线性数据结构开始,介绍大家耳熟能详的数据结构-数组。因为JavaScript已经为数组封...

飞跃疯人院
37分钟前
7
0
emsdk 开发环境搭建

https://emscripten.org/docs/getting_started/Tutorial.html 安装cmake sudo apt install cmake -ysudo apt install gcc g++ -ysudo apt-get install default-jre -y git clone......

阿豪boy
43分钟前
19
0
重写GetHashCode的最佳算法是什么? - What is the best algorithm for overriding GetHashCode?

问题: In .NET, the GetHashCode method is used in a lot of places throughout the .NET base class libraries. 在.NET中,整个.NET基类库的许多地方都使用GetHashCode方法 。 Implementi......

fyin1314
50分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部