React中文教程 - Component Basics(组件基础)
发布时间:2020-12-15 04:56:52 所属栏目:百科 来源:网络整理
导读:1. 什么是组件? React,一切尽是组件! 可以为React组件传递参数等,这些组件可以附件到已经存在页面中的任何DOM节点;使用React.renderComponent这个方法: // Replaces everything in `document.body` with divHello,world!/div;React.renderComponent(di
1. 什么是组件?React,一切尽是组件! 可以为React组件传递参数等,这些组件可以附件到已经存在页面中的任何DOM节点;使用React.renderComponent这个方法: // Replaces everything in `document.body` with <div>Hello,world!</div>; React.renderComponent(<div>Hello,world!</div>,document.body);一改常规,此处的DIV不是DOM节点! 2. 组件类型有两种组件:复合组件 和 DOM 2.1 复合组件大部分React代码都是组件的扩展,复合组件和DOM还可以混合使用构成更复杂高级的组件; /** @jsx React.DOM */ var LinkButton = React.createClass({ render: function() { return <a className="btn" />; } }); var myButton = <LinkButton />;上面使用React.createClass创建一个LinkButton组件,render()函数返回一个<a />DOM节点 2.2 DOM组件React中的DOM概念其实也是复合组件,它由@jsx React.DOM文档标识块声明,常见DOM基本都已经包括在内,上节JSX语法已经描述过。 尽管React的DOM概念与常规DOM很相似,但也有一些不同的:
下面定义一个有点击时间的链接 /** @jsx React.DOM */ var handleClick = function() {alert('Clicked!');}; var inlineStyle = {textDecoration: 'none'}; var myLink = <a className="btn" onClick={handleClick} style={inlineStyle} />;
您可以修改并重新发布本文,如果您能留下本文的参考连结,万分谢谢! 如果您对本文存在疑问,欢迎留言或者直接对本文评论,我会在看到的第一时间回复您。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |