React中文教程 - Component Basics(组件基础)
来源:互联网 发布:迅捷网络哪里能下载 编辑:程序博客网 时间:2024/05/21 10:41
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很相似,但也有一些不同的:
- 所有属性(包括事件)都使用驼峰命名法
- JavaScript标识符也一样,即className和htmlFor
- 样式表style使用属性的方式定义,例如{backgroundColor: '#f00'}
下面定义一个有点击时间的链接
/** @jsx React.DOM */var handleClick = function() {alert('Clicked!');};var inlineStyle = {textDecoration: 'none'};var myLink = <a className="btn" onClick={handleClick} style={inlineStyle} />;
您可以修改并重新发布本文,如果您能留下本文的参考连结,万分谢谢!
如果您对本文存在疑问,欢迎留言或者直接对本文评论,我会在看到的第一时间回复您。
- React中文教程 - Component Basics(组件基础)
- React中文教程 - Component Lifecycle(组件的生命周期)
- React Native——Component(组件)
- React Native--组件Component
- React组件Component
- React-Component(组件)
- React中文教程 - Advanced Components(组件高级使用)
- React中文教程 - Component Data(外部参数及私有变量)
- React 认知 三 组件Component
- react 入门-创建组件(1)继承component法
- react(一) 基础组件封装
- React Native基础组件
- 在React中使用extends React.Component定义的组件
- React-Router 中文简明教程(上)
- React-Router 中文简明教程(中)
- React-Router 中文简明教程(下)
- 组件(Component)映射
- 组件(Component)映射
- Android GridView 使用方法
- zTree 常见问题
- android(14)_解析xml文件1_pull
- 手机应用:史密斯圆图工具
- kettle jndi
- React中文教程 - Component Basics(组件基础)
- 题目1064:反序数 (数字反转)
- 充分利用栈空间提高程序性能
- Mac Os下安装mysql
- opencv2实现分水岭分割算法
- android activity无title theme
- 大话“扁平化设计”
- phpcms常用栏目字段调用代码
- org.hibernate.LazyInitializationException: could not initialize proxy - no Session