第二讲 React组件(component)的基本使用
本帖最后由 Sian 于 2017-12-22 10:37 编辑1、前面已经讲到了如何使用React进行DOM的基本操作，通过ReactDOM的render()方法来渲染Html视图；
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("container")
);
// 等同于
ReactDOM.render(
React.createElement("h1",null,"Hello React"),
document.getElementById("container")
);
2、上面的<h1>Hello React</h1>和Html标签一模一样，但在这里不能理解成是Html标签，而是JSX语法，也可以理解成是React自带的基础组件，最终会被解释成下面的样式，被Javascript执行；
3、这种所谓的基础组件，对应Html标签都有一个与之一模一样的组件，方便使用，除此之外还支持自定义组件丰富实际开发需要；
4、使用React的createClass()方法创建一个组件，写法与格式以及说明在注释中注明
/**
* 创建一个组件，用于输出Hello React
1、组件类名以大写字母开头，大驼峰命名法；
2、在React中使用React.createClass方法创建一个组件类
3、核心代码：每个组件都必须实现自己的render()方法,输出定义好的组件模板，返回值：null,false、组件模板
4、注意：组件类只能包含一个顶层标签
*/
// 代码示例
var HelloMessage = React.createClass({
render:function(){
return <h1>Hello React</h1>;
}
});
ReactDOM.render(
//模板中插入<HelloMessage />会自动生成一个实例
<HelloMessage />,
document.getElementById("container")
);
效果链接：http://www.yusian.com/react/component/index.html
5、组件还可以通过嵌套组成复合组件
5.1、先创建两个组件，分别实现不同的内容
var WebName = React.createClass({
render:function(){
return <h1>Sian</h1>;
}
});
var WebLink = React.createClass({
render:function(){
return <a href="http://www.yusian.com">http://www.yusian.com</a>
}
});
5.2、再创建一个组件，该组件包含的内容为前面所创建的组件，这就叫复合组件
var WebShow = React.createClass({
render:function(){
return (
<div>
<WebName />
<WebLink />
</div>
);
}
});
5.3、再渲染时直接使用该复合组件即可得到前面两组件的效果和
ReactDOM.render(
<WebShow />,
document.getElementById("container")
);
5.4、效果链接：http://www.yusian.com/react/component/index1.html
6、在浏览器空白处右击，点击“检查”查看浏览器最终解释的Html结构；
页:
[1]