ReAct 常用的属性

最新推荐文章于 2024-02-27 17:19:18 发布

原创最新推荐文章于 2024-02-27 17:19:18 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了React组件中属性的获取方式，包括使用this.props对象和this.props.children处理子节点，同时讨论了如何设置默认属性和使用ref访问真实DOM节点。通过实例展示了组件与HTML元素的混用及处理过程。

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