标签：1.16 function render DOM React var null 小记

React.createClass()

说明

用于创建组件
参数为一个对象 或 {}包裹的对象

使用示例

必不可少的结构：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.*()

说明

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

React.render()

说明

这是用于渲染的方法，注意是用，将各参数隔开，代码嵌套太长容易忘记

使用示例

ReactDOM.render( 
           React.createElement(Textarea,{defaultText:"Bob",}),
            document.getElementById('app')
);

React.createElement()

说明

用于创建节点
第一个参数：创建节点使用的组件
第二个参数：组件属性
第三各及以后：子元素（可以没有）

使用示例

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

• 点赞
• 收藏
• 分享
• • 文章举报

kl'WYS'20215 发布了1 篇原创文章 · 获赞 0 · 访问量 10 私信 关注

标签：1.16,function,render,DOM,React,var,null,小记
来源： https://blog.csdn.net/weixin_44723784/article/details/104010766

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。