ReAct 常用 的属性

前端之家收集整理的这篇文章主要介绍了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>
);  
}  
});
原文链接:https://www.f2er.com/react/307519.html

猜你在找的React相关文章