初探React，将我们的View标签化 - 叶小钗(2)_H5之家

1 var Pili = React.createClass({ 2 render: function() { 3 return <h1>Hello {this.props.name}!</h1>; 4 } 5 }); 6 7 React.render( 8 <Pili/>, 9 document.getElementById('example') 10 );

上文中Pili便是一个组件，标签使用法便是一个实例，声明式写法最终也会被编译成一般的js方法，这个不是我们现在关注的重点。

由于class与for为关键字，需要使用className与htmlFor替换

通过this.props对象可以获取组件的属性，其中一个例外为children，他表示组件的所有节点：

1 var Pili = React.createClass({ 2 render: function() { 3 return ( 4 <div> 5 { 6 this.props.children.map(function (child) { 7 return <div>{child}</div> 8 }) 9 } 10 </div> 11 ); 12 } 13 }); 14 15 React.render( 16 <Pili> 17 <span>素还真</span> 18 <span>叶小钗</span> 19 </Pili> 20 , 21 document.getElementById('example') 22 );

素还真叶小钗

PS：return的语法与js语法不太一样，不能随便加分号

如果想限制某一个属性必须是某一类型的话，便需要设置PropTypes属性：

1 var Pili = React.createClass({ 2 propType: { name: React.PropTypes.string.isRequired 5 }, 6 render: function() { 7 return <h1>Hello {this.props.name}!</h1>; 8 } 9 });

如果想设置属性的默认值，则需要:

1 var Pili = React.createClass({ 2 propType: { name: React.PropTypes.string.isRequired 5 }, 6 getDefaultProps : function () { 7 return { 8 title : '布袋戏' 9 }; 10 }, 11 render: function() { 12 return <h1>Hello {this.props.name}!</h1>; 13 } 14 });

我们仍然需要dom交互，我们有时也需要获取真实的dom节点，这个时候需要这么做：

1 var MyComponent = React.createClass({ 2 handleClick: function() { 3 React.findDOMNode(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 });

事件触发的时候通过ref属性获取当前dom元素，然后可进行操作，我们这里看看返回的dom是什么：

看来是真实的dom结构被返回了，另外一个比较关键的事情，便是这里的dom事件支持，需要细读文档：#supported-events

表单元素，属于用户与组件的交互，内容不能由props获取，这个时候一般有状态机获取，所谓状态机，便是会经常变化的属性。

1 var Input = React.createClass({ 2 getInitialState: function() { 3 return {value: 'Hello!'}; 4 }, 5 handleChange: function(event) { 6 this.setState({value: event.target.value}); 7 }, 8 render: function () { 9 var value = this.state.value; 10 return ( 11 <div> 12 <input type="text" value={value} onChange={this.handleChange} /> 13 <p>{value}</p> 14 </div> 15 ); 16 } 17 }); 18 19 React.render(<Input/>, document.body);

组件有其生命周期，每个阶段会触发相关事件可被用户捕捉使用：

Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM

一般来说，我们会为一个状态发生前后绑定事件，react也是如此：