react基础&JSX基础
一、HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
1、要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
2、要渲染 React 组件,只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
3、React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
二、
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
例:
ReactDOM.render(
/*注释 */
<h1>detanx {/*注释*/}</h1>,
document.getElementById('example')
);
三、JSX中不能使用if else,可以使用三元运算符代替
例:
<h1 style={mystyle}>{1 > 2? 'true':'false'}</h1>
四、react组件
例:
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World!</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
需要向组件传递参数,可以使用 this.props 对象
例:
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
/*方法二
function HelloMessage(props){
return <h1>Hello,{props.name}</h1>;
}*/
ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example') );
通过 getDefaultProps() 方法为 props 设置默认值
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'Runoob'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
}); ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
name 属性通过 this.props.name 来获取。
注意:在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,
这是因为 class 和 for 是 JavaScript 的保留字。
五、复合组件
例:
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
}); var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
}); var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}); ReactDOM.render(
<WebSite name="detanx" site=" http://www.baidu.com" />,
document.getElementById('example')
);
注意:ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠"/"的尖括号包围的
react基础&JSX基础的更多相关文章
- React中最基础的jsx语法
import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- react的新手基础知识笔记
<!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...
- 前端笔记之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 Native JSX value should be expression or a quoted JSX text.
问题描述: 我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...
- [.net 面向对象编程基础] (3) 基础中的基础——数据类型
[.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...
- [.net 面向对象编程基础] (4) 基础中的基础——数据类型转换
[.net面向对象编程基础] (4)基础中的基础——数据类型转换 1.为什么要进行数据转换? 首先,为什么要进行数据转换,拿值类型例子说明一下, 比如:我们要把23角零钱,换成2.30元,就需要把整形 ...
- [.net 面向对象编程基础] (5) 基础中的基础——变量和常量
[.net面向对象编程基础] (5) 基础中的基础——变量和常量 1.常量:在编译时其值能够确定,并且程序运行过程中值不发生变化的量. 通俗来说,就是定义一个不能改变值的量.既然不能变动值,那就必须 ...
随机推荐
- Chap8:加密货币TOP100[《区块链中文词典》维京&甲子]
根据2018年1月15日CoinMarketCap的加密货币市值排名编写,这里介绍TOP10,具体请参考<区块链中文词典>维京&甲子 01.比特币/Bitcoin/BTC 一种点对 ...
- >>>>>>>> [ovs][libvirt] virt-xml ovs-vsctl
查看可用的参数: [root@vrouter1 tong]# virt-xml --add-device --network=? |grep source source source_mode sou ...
- odoo中Python实现小写金额转换为大写金额
自动将小写的金额数值转换为大写,方便记录 class project_parm(models.Model): def IIf(self, b, s1, s2): if b: return s1 els ...
- day5_函数_判断小数
def check_float(s): ''' #这个函数的作用就是判断传入的字符串是否是合法的消失 :param s: 传入一个字符串 :return: True/False ''' s = str ...
- 配置ASM以及创建恢复目录
本次配置ASM沿用了搭建RAC的环境配置,系统选用CENTOS6.8 首先本地配置YUM,安装GRID集群件所需要的RPM包 [root@rac01 Packages]# cd /etc/yum.re ...
- 《linux 进程管理》- ps/top/kill/nice
一:进程简述 二:ps 查看进程 语法 ps * -A 列出所有进程,和 -e 同等效果 * -a 列出不和本终端有关系的所有进程 * -w 显示加宽,可以显示较多信息 * -u 显示有效使用者相关的 ...
- redis的基本介绍
redis是什么? redis是一种菲关系型数据库,存储key-value类型的数据. redis支持的数据类型 这里所说的数据类型其实就是value对应的数据类型.一共有五种: String 1.S ...
- 海思QT4.8.0开发总结
1.QT4.8.0移植 2.QT4.8.0界面的透明度设置 发现设置空间透明度时候,QT显示的绿色的背景,没有透明!设置如下: 在程序起始的地方设置: hisi_init(); QWSServer:: ...
- python练习题-day6
1.老男孩好声⾳选秀⼤赛评委在打分的时候呢, 可以进⾏输入. 假设, 老男孩有10个评委. 让10个评委进⾏打分, 要求, 分数必须⼤于5分, ⼩于10分. pingwei=["a" ...
- SQL优化之踩过的坑【一】
正看资料看的过瘾,突然收到报警,说服务器负载太高,好吧,登录服务器看看,我擦嘞,还能不能愉快的玩耍了?下面是当时的负载情况 看见mysql使用cpu已经到了2000,io没有等待.说明应该没有大的临时 ...