ReAct 常用 的属性

<People {...this.state} onHungry={this.onHungry}></People>
如果组件有多个属性 可以使用   {...this.state}  这相当于 类似于 name={this.props.name}     title={this.props.title}

组件的属性可以在组件类的 this.props 对象上获取

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。

此外，getDefaultProps 方法可以用来设置组件属性的默认值。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性（查看 demo07 ）。

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

	 var InputText = React.createClass({  
       render: function() { 
		 var LabelElement = React.createElement("label", null,this.props.label);
		 if(this.props.label==null)
		 {
			 LabelElement="";
		 }	   
         return (
			<div className="span12 field-box">
				{LabelElement}
				<input className="span9" id={this.props.id} type="text"  placeholder={this.props.placeholder}/>
			</div>
		 );  
       }  
     });

</pre><pre name="code" class="html"><InputSelect label="State:">
<option value="AK" >Alaska</option>
<option value="HI" >Hawaii</option>
<option value="CA" >California</option>
<option value="NV" >Nevada</option>
<option value="OR" >Oregon</option>
<option value="WA" >Washington</option>
<option value="AZ" >Arizona</option>
</InputSelect>

组件与html混用

var InputSelect = React.createClass({ 
render: function() {  
return (
<div className="span12 field-box">
<label>{this.props.label}</label>
<div className="ui-select span5">
<select>
     
{this.props.children}
  
</select>
</div>
</div>
);  
}  
});