分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

React之JSX

发布时间:2023-09-06 01:13责任编辑:董明明关键词:React

  上次我们主要讨论了React最基本的ReactDOM.render()(

);

  现在看看JSX语法

JSX语法就是XML与JS的相结合,HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写;

 看一组案例‘

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script src="build/react.js"></script> ???<script src="build/react-dom.js"></script> ???<script src="build/browser.min.js"></script></head><body><div id="exam"></div><script type="text/babel"> ??var names=[‘杨幂‘,‘迪丽热巴‘,‘周星‘]; ????ReactDOM.render( ???????????<div> ???????????{ ?????????????????names.map(function(name){ ??????????????????????return <div> Hello ,{name} ??????????????????????</div> ??????????????}) ???????????} ??????????????????????????</div>, ???????????document.getElementById("exam")//此处结束不应该+; ????????); ???</script> ???</body></html>

以上案例我们看出JSX遇到<开头就已HTML解析,遇到{}开头就用JS规则来解析.

React之JSX

原文地址:http://www.cnblogs.com/luotianyi/p/7586518.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved