【JAVASCRIPT】React学习-JSX 语法
摘要
react 学习包括几个部分：
- 文本渲染
- JSX 语法
- 组件化思想
- 数据流
JSX 语法
1. 定义
JSX 是javascript + xml 的合集，我们可以将javascript 与 html 一起编写， 封装页面组件的html 格式与业务逻辑。但使用 JSX 时，一定要编写成能精确定义和反应组件及属性的树状结构，避免无法解析，虽然目前还没遇到过无法解析的情形。
2. 如何区分javascript 与 xml
JSX 代码中 以 {} 包含的为 javascript 代码， <> 包含的为 html 代码，解析时采用对应的语法解析器
3. React 模块
约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
- html 标签，JSX 中以小写字母开头
- react 组件，JSX 中以大写字母开头
<body>
<div id="HelloWorld"></div>
<div id="HelloWorld1"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var hw = <div>hello,world</div>;
var HelloWorld = React.createClass({
clickHandler: function() {
console.log(this.props);
console.log('yes, click event has been fired!');
},
render: function() {
return (
<p onClick={this.clickHandler}>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
React.render(
hw,
document.getElementById('HelloWorld1')
);
</script>
4. html 属性
自定义属性采用data 开头， 比如 data-index 表示此dom 节点的序列号
5. 注意点
前面的代码都用了JSXTransformer.js，发布时一定要提前编译为javascript，可安装 react-tools 进行转化，自动化工具也可使用gulp 对应的插件gulp-react
JSX 其实是一种语法糖，它将JSX 代码翻译成javascript，某些情况无法实现，如下面
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var a = true;
// 不正确写法，暂不知道原因
// var helloWorld = <div id=if (a) { 'success'} else { 'fail'}>hehehe</div>;
// var helloWorld = <div>{if (a) <div id='success'>Hello World!</div> else <div>Hello World!</div>}</div>;
// 正确写法
var helloWorld = <div>{a ? <div id='success'>Hello World!</div> : <div>Hello World!</div>}</div>;
React.render(
helloWorld,
document.getElementById('HelloWorld')
);
</script>
不支持某些html 属性，如 class for , JSX 中替换为 className htmlFor
JSX 大小写敏感
比如 onClick 如果写成 onclick 是无法触发事件的
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
clickHandler: function() {
console.log(this.props);
console.log('yes, click event has been fired!');
},
render: function() {
return (
<p onClick={this.clickHandler}>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
</script>
- 行内样式时不能采用引号的书写方式，正确方式如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>行内样式</title>
<style type="text/css">
.big {
font-size: 20px;
}
</style>
</head>
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<p style={{color:'red'}} className="big">
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
</script>
- html 格式文本展示，举个例子：
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<p>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
// 转义
// var content = <div>huxiaoyun</div>;
// 不转义，作字符串输出
var content = '<div>huxiaoyun</div>';
React.render(
<HelloWorld name={content} />,
document.getElementById('HelloWorld')
);
</script>
【JAVASCRIPT】React学习-JSX 语法的更多相关文章
- 前端笔记之React（一）初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
- React的JSX语法及组件
最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...
- react 的JSX语法需要注意哪些点？
注释方式 ReactDOM.render( <div> {/*JSX 中的注释方式*/} </div>, document.getElementById('root') ) j ...
- React之JSX语法
1. JSX的介绍 JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...
- React之jsx语法特性
jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...
- 3.react 基础 - JSX 语法
1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = < ...
- react的jsx语法
在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...
- React的jsx语法，详细介绍和使用方法！
jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...
- React使用JSX语法
目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法 <--返回目录 JSX语法:符合xml规范的js语法 JS ...
随机推荐
- github pages部署静态网页
如果你的项目只是一个静态网站,就没有必要再去整什么服务器,github pages 提供了搭建静态网站的功能: 为什么使用Github Pages 1. 搭建简单而且免费: 2. 支持静态脚本: 3. ...
- mailto调用本地默认客户端发邮件
下面介绍如何利用 Mailto功能: 实现 Mailto的基本html代码: <a href="mailto:123@qq.com">点击这里发邮件!</a> ...
- orcle自定义类型type/create or replace type
一.type / create or repalce type 区别联系 相同: 可用关键字create type 或者直接用type定义自定义类型, 区别: create type 变量 as ta ...
- git与github的使用
git和github是两个完全不同的概念,就好比如雷锋与雷峰塔的关系. git是一个版本管理工具,用来更好的管理你的程序,比如你原来提交过的内容,以后虽然修改了,但是通过git这个工具, 可以把你原来 ...
- 我的第一个jQuery插件--表格隔行变色
虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...
- Unity3D常用 API 之实例化与销毁
1.实例化游戏物体 1.1.游戏中的案例介绍 在很多 MMORPG 类的游戏中都有类似于“金钱副本”的副本关卡.在这类副 本中通常都是限定一个时间,在这个时间内玩家可以尽情的破坏,然后收集金钱. 分析 ...
- top的用法
top命令可以用来方便地观察当前系统中运行的进程的信息,并可以在运行过程中执行改变进程的优先级.更改排序规则.导出状态信息等操作,非常方便. 1.主要选项 -d:后接秒数,状态更新的秒数,默认5秒-b ...
- 如何在phpstorm中安装xdebug调试工具
用习惯了Visio Studio的调试工具,如果写个php用phpstorm没有调试工具,觉得还缺点什么.接下来就讲解一下如果安装xdebug,最好发现这个插件真好用! 1.下载xdebug.tar: ...
- WPF: 实现 ScrollViewer 滚动到指定控件处
在前端 UI 开发中,有时,我们会遇到这样的需求:在一个 ScrollViewer 中有很多内容,而我们需要实现在执行某个操作后能够定位到其中指定的控件处:这很像在 HTML 页面中点击一个链接后定位 ...
- MYSQL数据类型和where条件
MySQL中常见的数据类型 一.字符型 ① CHAR(N):固定N个字符长度的字符串,如果长度不够自动空格补齐; N的范围 0~255 ② VARCHAR(N): 存储可变长度的字符串,最常用 ③ T ...