参考:http://www.ruanyifeng.com/blog/2015/03/react.html
官方文档:https://reactjs.org/docs/introducing-jsx.html
JSX 的基本语法规则
遇到HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头),就用 JavaScript 规则解析
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="../build/react.js"></script> 5 <script src="../build/react-dom.js"></script> 6 <script src="../build/browser.min.js"></script> 7 </head> 8 <body> 9 <div id="example"></div> 10 <script type="text/babel"> 11 var names = ['Alice', 'Emily', 'Kate']; 12 ReactDOM.render( 13 <div> 14 { 15 names.map(function (name) { 16 return <div>Hello, {name}!</div> 17 }) 18 } 19 </div>,//<div>{names }</div>, 20 document.getElementById('example') 21 ); 22 </script> 23 </body> 24 </html>
React 组件
React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
1 var HelloMessage = React.createClass({ 2 render: function() { 3 return <h1>Hello {this.props.name}</h1>; 4 } 5 }); 6 7 ReactDOM.render( 8 <HelloMessage name="John" />, 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 <h1> {this.props.title} </h1>; 8 } 9 });
ref
属性:从组件获取真实 DOM 的节点
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 var MyComponent = React.createClass({ 2 handleClick: function() { 3 this.refs.myTextInput.focus(); 4 }, 5 render: function() { 6 return ( 7 <div> 8 <input type="text" ref="myTextInput" /> 9 <input type="button" value="Focus the text input" onClick={this.handleClick} /> 10 </div> 11 ); 12 } 13 }); 14 15 ReactDOM.render( 16 <MyComponent />, 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
属性。它表示组件的所有子节点