参考:
官方文档:
JSX 的基本语法规则
遇到HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头),就用 JavaScript 规则解析
1 2 3 4 5 6 7 8 9 10 23 24
React 组件
React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
1 var HelloMessage = React.createClass({ 2 render: function() { 3 returnHello { this.props.name}
; 4 } 5 }); 6 7 ReactDOM.render( 8, 9 document.getElementById('example')10 );
组件的用法与原生的 HTML 标签完全一致,可以任意加入属性
组件的属性可以接受任意值,字符串、对象、函数等等都可以
组件的属性可以在组件类的 this.props
对象上获取,比如 name
属性就可以通过 this.props.name
读取;
组件类的PropTypes
属性,就是用来验证组件实例的属性是否符合要求
1 var MyTitle = React.createClass({2 propTypes: {3 title: React.PropTypes.string.isRequired,4 },5 6 render: function() {7 return{ this.props.title}
;8 }9 });
ref
属性:从组件获取真实 DOM 的节点
1 var MyComponent = React.createClass({ 2 handleClick: function() { 3 this.refs.myTextInput.focus(); 4 }, 5 render: function() { 6 return ( 78 9 1011 );12 }13 });14 15 ReactDOM.render(16,17 document.getElementById('example')18 );
上面代码中,组件 MyComponent
的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref
属性,然后 this.refs.[refName]
就会返回这个真实的 DOM 节点。
需要注意的是,由于 this.refs.[refName]
属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click
事件的回调函数,确保了只有等到真实 DOM 发生 Click
事件之后,才会读取 this.refs.[refName]
属性。
React 组件支持很多事件,除了 Click
事件以外,还有 KeyDown
、Copy
、Scroll
等,完整的事件清单请查看。
注意:
1、组件类的第一个字母必须大写;
2、组件类只能包含一个顶层标签;
3、添加组件属性, class
属性需要写成 className
,for
属性需要写成 htmlFor
,这是因为 class
和 for
是 JavaScript 的保留字;
4、this.props
对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children
属性。它表示组件的所有子节点