React之JSX
0.对于学习React,我们先来熟悉下JSX的语法,
下面的这些语法仅用于构建一个组件的标签模块,定义完成之后如果需要做演示,请附加以下代码:
ReactDOM.render(
element1,
document.body
);
即可完成标签的演示。
1.普通的标签
const element1 = <div>Hello JSX</div>;
2.带子标签的标签
const element2 = (
<div>
<h1>Hello Child1</h1>
<span>Hello 2</span>
</div>
);
3.1带变量的标签
const user = {
name: 'qiumohanyu',
age: 27,
hobby: 'nothing',
website: 'www.baidu.com'
};
const hasNav = true;
const element3_1 = (
<div>
<h1>{user.name}</h1>
<span>{user.age}</span>
<span>{user.hobby}</span>
<a src={user.website}>主页</a> <div> {hasNav ? <nav>Nav</nav> : null}</div>
</div>
);
3.2 内置函数的标签
function getItem() {
return 'from function';
} const element3_2 = <div>{getItem()}</div>;
4.1 带类名的标签 class=>className
const type = true;
const element4_1 = (
<div>
<div className="mycls">带class的标签</div>
<span className={type?'class1':'class2'}>带判断逻辑的类名</span>
</div>
);
4.2 带tabindex的标签 tabindex=>tabIndex
const element4_2 = <div tabIndex="0">带tabindex的标签</div>;
4.3 带for属性的label
const element4_3 = <label htmlFor="input1">User Name</label>;
5.1 属性
const MyComponent = React.createClass(
{
render: function() {
return <div>My Component</div>
}
}
);
var x = "foo-value";
var y = "bar-value";
const element5_1 = <MyComponent foo={x} bar={y}/>;
5.2 属性延伸
var props = {};
props.foo = x;
props.bar = y;
const element5_2 = <MyComponent {...props} />;
//需要覆盖时
const element5_3 = <MyComponent {...props} foo={'new-value'}/>;
6 style属性
var mystyles = {
color: 'red',
border: '1px solid #000'
};
const element6 = <div style={mystyles}></div>;
7 HTML转义
var innerHtml = '<span> my span label</span>';
var toDiv = { __html: innerHtml };
const element7 = (
<div dangerouslySetInnerHTML={toDiv}></div>
);
8 自定义HTML属性
const element8=(
<div data-id="can render" ride="can not be render"></div>
);
React之JSX的更多相关文章
- React Native JSX value should be expression or a quoted JSX text.
问题描述: 我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...
- React入门---JSX内置表达式-6
个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...
- react基础&JSX基础
一.HTML 标签 vs. React 组件 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes). 1.要渲染 HTML 标签,只需在 JSX 里使用小 ...
- react with JSX for {if…else…}
在react中用jsx渲染dom的时候经常会遇到if条件判断,然而在jsx中竟是不允许if条件判断的.以下有几种判断方式,可以根据自己的应用场景,挑选适合的 https://blog.csdn.net ...
- 【02】react 之 jsx
React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲 ...
- 前端笔记之React(一)初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
- React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
- React之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...
- React入门--------JSX
React学习网站 React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html React官方中文网站:http://www.css88.c ...
随机推荐
- C#通过SSH连接MySql
出于安全考虑,有的时候数据库服务器只能通过SSH访问,比如MySql服务装在了服务器A上,并且A机器只允许B机器才能访问,而部署环境可能在C机器上,这时候就要C服务器通过B服务器连接A服务器,这时候就 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- iptables四个表与五个链间的处理关系
转载自:http://www.linuxidc.com/Linux/2012-08/67505.htm netfilter/iptables IP 信息包过滤系统是一种功能强大的工具,可用于添加.编辑 ...
- html5 离线存储
在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...
- js 一个自写的 监测类
自从认识了jQuery后,很多页面加载入口,都放在document.ready里面.但是有时候这个觉得ready加载太慢, 这个[监测类 ]就开始产生了 效果类似这个. 每10毫秒检查一次,直到加载了 ...
- VM VirtualBox 安装 Android 4.3虚拟机完整教程
大家好,今天给大家带来一篇安装安卓虚拟机的教程! 好了,现在开始我们的教程! 一.安装准备 1.Android 4.3安装镜像(文件名:android-x86-4.3-20130725.iso) 电脑 ...
- HttpClient 版本变化 转载
转载地址:http://my.oschina.net/u/577453/blog/173724 最近用到了HttpClient写爬虫,可能我有新版本强迫症,老是喜欢用新版本的东西(虽说新版本不一定好用 ...
- 动态创建script在IE中缓存js文件时导致编码不正确bug
$.each(scripts, function(){ if(!jsExist(this.src)){ var s = document.createElement("SCRIPT" ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- Candies-POJ3159差分约束
Time Limit: 1500MS Memory Limit: 131072K Description During the kindergarten days, flymouse was the ...