HTML标签与React组件
React可以直接渲染HTML类型的标签,也可以渲染React的组件
HTML类型的标签第一个字母用小写来写表示。
import React from 'react';
//当一个标签里面为空的时候,可以直接使用自闭和标签
//注意class是一个JavaScript保留字,所以如果class应该替换成className
let divElement =
;
//等同于
let divElement = React.createElement('div',{className:'foo'});
React组件标签第一个字母大写。
import React from 'react';
class Headline extends React.component{
...
render(){
//直接return JSX语法
return h1>Hello React
}
}
let Headline = Headline />;
let headline = React.createElement(Headline);
JSX语法使用第一个字母大小写来区分是一个普通的HTML标签还是一个React组件
注意:因为JSX本身是JavaScript语法,所以一些JavaScript中的保留字要用其他的方式书写,比如第一个例子中class要写成className
//等同于
let divElement = React.createElement('div',{className:'foo'});
React组件标签第一个字母大写。
import React from 'react';
class Headline extends React.component{
...
render(){
//直接return JSX语法
return h1>Hello React
}
}
let Headline = Headline />;
let headline = React.createElement(Headline);
JSX语法使用第一个字母大小写来区分是一个普通的HTML标签还是一个React组件
注意:因为JSX本身是JavaScript语法,所以一些JavaScript中的保留字要用其他的方式书写,比如第一个例子中class要写成className