reactjs学习笔记2--组件的介绍
发布时间:2020-12-15 03:29:27 所属栏目:百科 来源:网络整理
导读:什么是组件 组件就像是乐高积木,一个完整的房子,可以由砖头一块一块的组成,一块砖头,就可以称为一个组件。 如何创建组件 调用 React.createClass 方法,传入的参数为一个对象,对象必须定义一个 render 方法,render 方法返回值为组件的渲染结构,也可以
什么是组件组件就像是乐高积木,一个完整的房子,可以由砖头一块一块的组成,一块砖头,就可以称为一个组件。
如何创建组件调用 React.createClass 方法,传入的参数为一个对象,对象必须定义一个 render 方法,render 方法返回值为组件的渲染结构,也可以理解为一个组件实例(React.createElement 工厂方法的返回值),返回值有且只能为一个组件实例,或者返回null/false,当返回值为 null/false 的时候,React 内部通过 var MessageBox = React.createClass({ render: function () { return ( <div> <h1> hello react </h1> </div> ); } }); 如何渲染组件例子中通过调用 React.render 方法(例子基于0.13版本 新版中使用 ReactDOM.render 方法), 第一个参数为 组件名称,第二个为定义的 DOM 元素,第三个参数可以为空。 var MessageBox = React.createClass({ render: function () { return ( <div> <h1> hello react </h1> </div> ); } }); React.render(<MessageBox />,document.getElementById('app'),function () { console.log('渲染完成'); } ); 组件的使用实例1、组件的组合使用组件化的思想 就是让组件可以实现复用,一个大的应用通过多个小组件组合而成。下面的例子中展示了 react 组件是如何组合工作的。 var MessageBox = React.createClass({ render: function () { return ( <div> <h2> 你好, react!!! </h2> <SubMessage /> </div> ); } }); var SubMessage = React.createClass({ render: function () { return ( <div> <h1> IDEA是高效的代码编辑器 </h1> <Footer /> </div> ) } }); var Footer = React.createClass({ render: function () { return (<h2>这是脚部文件</h2>) } }) React.render(<MessageBox />,function () { console.log('渲染完成'); } ); 执行上述代码可以得到
2、循环使用一个组件var MessageBox = React.createClass({ render: function () { var submessages = []; for(var i=0;i<10;i++){ submessages.push( <SubMessage key={'s'+i}/> ) } return ( <div> <h1> hello react </h1> {submessages} </div> ); } }); var SubMessage = React.createClass({ render: function () { return ( <div> <h1> 高效的代码编辑器 </h1> </div> ) } }); React.render(<MessageBox />,function () { console.log('渲染完成'); } ); 可以得到的结果如下图 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |