1.传统方法(es5)
/**
* 构造组件
* 我们通过 JavaScript 对象传递一些方法到 React.createClass() 来创建一个新的 React 组件。
* 其中最重要的方法是 render ,该方法返回一棵 React 组件树,这棵树最终将会渲染成 HTML 。
* 这里的 <div> 标签不是真正的 DOM 节点;他们是 React div 组件的实例。你可以认为这些标签就是一些标记或者数据, React 知道如何处理它们。React 是安全的。
* 我们不生成 HTML 字符串,因此默认阻止了 XSS 攻击。
*/
var CommentList = React.createClass({
render: function () {
return(
<div className='commentList'>
Hello, world! I am a CommentList.
</div>
);
}
})
2.使用es6语法
/**
* es6 将组件是为class
**/
class Clock extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<h2>现在是{this.props.date.toLocaleTimeString()}</h2>
</div>
)
}
}
3.渲染 HTML 标签
// 要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名
const divElement = <div className="jin"/>;
ReactDOM.render(
divElement,
document.getElementById('content')
)
4.渲染组件
// 要渲染 React 组件,只需创建一个大写字母开头的本地变量。
const recElement = React.createClass(
{/*住宿。。。*/}
)
ReactDOM.render(
<Clock/>,
document.getElementById('content')
)
网友评论