从零开始学React(4)——自定义组件
发布时间:2020-12-15 03:32:56 所属栏目:百科 来源:网络整理
导读:前一章是从零开始学React(3)——数组http://my.oschina.net/u/2608629/blog/675799 从这一章开始,难度就加大了。首先,我们看一下什么是组件(component)。 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件
前一章是从零开始学React(3)——数组http://my.oschina.net/u/2608629/blog/675799 从这一章开始,难度就加大了。首先,我们看一下什么是组件(component)。 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。 在HTML中一个标签就相当于一个组件,例如<div>,<img/>等都是组件。在这一章中,我们可以自己设计组件,然后自定义属性。 <!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="diy"></div> <script type="text/babel"> var NowTime = React.createClass({ render : function (){ return <div>现在{this.props.country}时间为:{new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()}</div>; } }); ReactDOM.render( <NowTime country="中国"/>,document.getElementById("diy") ) </script> </body> </html> 在这里我自定义了一个显示当前时间的组件<NowTime>,该组件有个country属性。使用该组件即可打印当前时间。 显示效果如图 注意点
在添加自定义组件属性时,设定class,for时,要写为className,htmlFor。因为class和for是javascript的关键字 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |