ReAct 常用 的属性

组件的属性可以在组件类的 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.myTextInputfocus);
  },
  render{
    return (
      <div>
        <input type="text" ref"myTextInput" /"button" value"Focus the text input" onClick={this.handleClick} >
      </div>
    }
;

ReactDOMrender(
  <MyComponent >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>
		 );  
       }  
     });

<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>
);  
}  
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!