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