react笔记之jsx

责编:menVScode 2017-07-08 13:23 阅读(741)

        JSX语法跟HTML语法很像,但是JSX语法细节很多。

1、jsx是什么

        jsx是一种语法;描述页面的结构样子;他会变成一个对象;

2、属性定义

        2.1 注意js关键字和保留字

        class在es5中是一个保留字,在es6中是一个关键字,要将class改写成className,否则会报错

import React from 'react';
import ReactDom from 'react-dom';
require('./common/style/main.css');
ReactDom.render(
	<div className="welcome">hello react</div>,
	document.getElementById('root')
);

        2.2 不在规范的属性,react不现实

        如果想要自定义属性,若直接写成<span abc='menvscode'></span>会报错,要按如下方式书写:

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
	<div data-abc='menvscode'>hello react</div>,
	document.getElementById('root')
);
3、表达式

        3.1 在jsx里嵌套表达式,{}

import React from 'react';
import ReactDom from 'react-dom';

let w1='hello';
let w2='word';
ReactDom.render(
	<div>{99+1} <span>{w1} {w2}</span></div>,
	document.getElementById('root')
);
//结果为:100 hello word

        3.2 jsx本身当成表达式

import React from 'react';
import ReactDom from 'react-dom';
let sp = <span>我也是jsx</span>
ReactDom.render(
	<div>{sp}</div>,
	document.getElementById('root')
);
4、样式

        4.1 行内样式:把样式写成对象

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
	<div style={{color:'red',fontSize:20}}>hello react</div>,
	document.getElementById('root')
);
标签: jsx react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码