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的更多相关文章

  1. React Native JSX value should be expression or a quoted JSX text.

    问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...

  2. React入门---JSX内置表达式-6

    个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...

  3. react基础&JSX基础

    一.HTML 标签 vs. React 组件 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes). 1.要渲染 HTML 标签,只需在 JSX 里使用小 ...

  4. react with JSX for {if…else…}

    在react中用jsx渲染dom的时候经常会遇到if条件判断,然而在jsx中竟是不允许if条件判断的.以下有几种判断方式,可以根据自己的应用场景,挑选适合的 https://blog.csdn.net ...

  5. 【02】react 之 jsx

    React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲 ...

  6. 前端笔记之React(一)初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  7. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  8. React之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...

  9. React入门--------JSX

    React学习网站 React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html React官方中文网站:http://www.css88.c ...

随机推荐

  1. C#通过SSH连接MySql

    出于安全考虑,有的时候数据库服务器只能通过SSH访问,比如MySql服务装在了服务器A上,并且A机器只允许B机器才能访问,而部署环境可能在C机器上,这时候就要C服务器通过B服务器连接A服务器,这时候就 ...

  2. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  3. iptables四个表与五个链间的处理关系

    转载自:http://www.linuxidc.com/Linux/2012-08/67505.htm netfilter/iptables IP 信息包过滤系统是一种功能强大的工具,可用于添加.编辑 ...

  4. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  5. js 一个自写的 监测类

    自从认识了jQuery后,很多页面加载入口,都放在document.ready里面.但是有时候这个觉得ready加载太慢, 这个[监测类 ]就开始产生了 效果类似这个. 每10毫秒检查一次,直到加载了 ...

  6. VM VirtualBox 安装 Android 4.3虚拟机完整教程

    大家好,今天给大家带来一篇安装安卓虚拟机的教程! 好了,现在开始我们的教程! 一.安装准备 1.Android 4.3安装镜像(文件名:android-x86-4.3-20130725.iso) 电脑 ...

  7. HttpClient 版本变化 转载

    转载地址:http://my.oschina.net/u/577453/blog/173724 最近用到了HttpClient写爬虫,可能我有新版本强迫症,老是喜欢用新版本的东西(虽说新版本不一定好用 ...

  8. 动态创建script在IE中缓存js文件时导致编码不正确bug

    $.each(scripts, function(){ if(!jsExist(this.src)){ var s = document.createElement("SCRIPT" ...

  9. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  10. Candies-POJ3159差分约束

    Time Limit: 1500MS Memory Limit: 131072K Description During the kindergarten days, flymouse was the ...