用于创建组件
参数为一个对象 或 {}包裹的对象
必不可少的结构:render :function(){return React.DOM.*(…);
var counter = React.createClass({ name : "counter", Mixin:[logMixin], propTypes:{ count: React.PropTypes.number.isRequired, }, render :function(){ return React.DOM.span(null,this.props.count); } });
//创建一个实例var myComponent = React.createClass({ render: function(){ return React.DOM.span(null,"I'm so custom"); } }); //工厂方法var ComponentFactory = React.createFactory(myComponent);ReactDOM.render(ComponentFactory(), document.getElementById("2") );
React.DOM.* 是预定义好的HTML集合
第一个参数:属性 null 或 {属性1,… ,属性n}
第二个及以后:子元素 也可以是 React.DOM. 可以没有子元素,如下列 React.DOM.textarea只有属性
React.DOM.div(null, React.DOM.textarea({ value : this.state.text, onChange: this._textChange, }), Counter );
这是用于渲染的方法,注意是用,将各参数隔开,代码嵌套太长容易忘记
ReactDOM.render( React.createElement(Textarea,{defaultText:"Bob",}), document.getElementById('app'));
用于创建节点
第一个参数:创建节点使用的组件
第二个参数:组件属性
第三各及以后:子元素(可以没有)
React.createElement(Textarea,{defaultText:"Bob",})
生命周期
var logMixin = { _log: function(methodName, args) { console.log(this.name '::' methodName, args); }, componentWillUpdate: function() {this._log('componentWillUpdate', arguments);}, componentDidUpdate: function() {this._log('componentDidUpdate', arguments);}, componentWillMount: function() {this._log('componentWillMount', arguments);}, componentDidMount: function() {this._log('componentDidMount', arguments);}, componentWillUnmount: function() {this._log('componentWillUnmount', arguments);}, }; var Counter = React.createClass({ name: 'Counter', mixins: [logMixin], propTypes: { count: React.PropTypes.number.isRequired, }, render: function() { return React.DOM.span(null, this.props.count); } }); var TextAreaCounter = React.createClass({ name: 'TextAreaCounter', mixins: [logMixin], propTypes: { defaultValue: React.PropTypes.string, }, getInitialState: function() { return { text: this.props.defaultValue, } }, _textChange: function(ev) { this.setState({ text: ev.target.value, }); }, render: function() { var counter = null; if (this.state.text.length > 0) { counter = React.DOM.h3(null, React.createElement(Counter, { count: this.state.text.length, }) ); } return React.DOM.div(null, React.DOM.textarea({ value: this.state.text, onChange: this._textChange, }), counter ); } }); var myTextAreaCounter = ReactDOM.render( React.createElement(TextAreaCounter,{ defaultValue: "Bob", }), document.getElementById("app") );
联系客服