React JSX | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
React 教程
React 教程
React 安装
React 元素渲染
React JSX
React 组件
React State(状态)
React Props
React 事件处理
React 条件渲染
React 列表 & Keys
React 组件 API
React 组件生命周期
React AJAX
React 表单与事件
React Refs
React 安装
React 组件
React JSX
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
我们先看下以下代码：
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
JSX 是在 JavaScript 内部实现的。
我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
React 实例var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
尝试一下 »
注意:
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML
属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
使用 JSX
JSX 看起来类似 HTML ，我们可以看下实例:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
React 实例
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
document.getElementById('example')
);
尝试一下 »
独立文件
你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在 HTML 文件中引入该 JS 文件：
React 实例
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
尝试一下 »
JavaScript 表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
React 实例
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
document.getElementById('example')
);
尝试一下 »
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
React 实例
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
document.getElementById('example')
);
尝试一下 »
样式
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：
React 实例
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
尝试一下 »
注释
注释需要写在花括号中，实例如下：
React 实例
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
尝试一下 »
数组
JSX 允许在模板中插入数组，数组会自动展开所有成员：
React 实例
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
尝试一下 »
React 安装
React 组件
3 篇笔记
写笔记
#0 朝阳 120***3522@qq.com 85关于React注释的问题：1、在标签内部的注释需要花括号2、在标签外的的注释不能使用花括号
ReactDOM.render(
/*注释 */
<h1>孙朝阳 {/*注释*/}</h1>,
document.getElementById('example')
);朝阳 朝阳 120***3522@qq.com7年前 (2017-04-27)
#0 心叶 yel***ing@gmail.com 49关于React入门容易出错的地方：
如同上面说的，代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它
1.错误例子：
ReactDOM.render(
<h1>这是错误的例子</h1>
<span>假设这里是标题下面的内容</span>,
document.getElementById("example")
);
2.正确例子：
ReactDOM.render(
<section>
<h1>这是正确的例子</h1>
<span>假设这里是标题下面的内容</span>
</section>,
document.getElementById("example")
);心叶 心叶 yel***ing@gmail.com7年前 (2017-05-03)
#0 kate 118***7225@qq.com 89通过 style 添加内联样式的时候，容易犯的错误。
错误：
ReactDOM.render(
<h1 style = {fontSize:12}>菜鸟教程</h1>,
document.getElementById('example')
);
正确：
ReactDOM.render(
<h1 style = {{fontSize:12}}>菜鸟教程</h1>,
document.getElementById('example')
);
kate kate 118***7225@qq.com5年前 (2018-07-24)
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
正则表达式入门教程
·
Python lambda（...
·
Java 注释
·
Bootstrap5 消息...
·
Python 按字母顺...
·
Python 删除字符...
·
git restore 命令
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2023 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注