如何在React中使用数据动态生成DOM标签

在我们的产品中有很多需要点击 或者回调函数执行时 生成DOM 标签 我称之为动态生成标签，在平时我们使用Jquery来实现时 我们通常会使用点击某个元素时调用JQ中的append()API 来实现 ，

我们实质上是利用事件来生成新的DOM 元素 

但是在React中我们尽量少的使用JQ 理解组件化的概念，那我们怎么利用它本身的某些API和方法来实现我们动态生成DOM的需求呢 

我们知道React中的两个特别重要的属性 this.props 和this.state   this.props 是让子组件 来使用父组件的方法和属性， this.state 是在组件中声明一个变量的方法   还有一个我们必须要了解的方法

this.Setstate ()    这个方法一旦调用  组件将自动重新调用render()方法  来重新渲染组件 所以React中基本的数据都是定义在总组件中的。下图为 this.Setstate () 方法的截图：

onChangeMap:function(mapId){   //console.log('main onChangeMap'+mapId);   if(mapId){      this.setState({         mapid:mapId      });   }},

在了解完React的基本属性和方法时候 如果要想更深的理解React 我们必须要了解它的生命周期，接下来我们看看React中动态生成DOM元素是怎样完成的

首先我们要理解整体结构 我们的父组件中要包含我们动态DOM的父组件ClHeadRight  如下图：

var ClHeadFirst = React.createClass({   //getInitialState:function(){   // return {color1:"rgb(90, 183, 131)"}   //},   render:function(){      // console.log("ClassicTheme ClHeadFirst render:"+this.props.color);      return (         <div style={{backgroundColor:this.props.color}} className="clHeadFirst">            <ClHeadLeftFirst titles={this.props.titles} />            <ClHeadRightFirst links={this.props.links} titles={this.props.titles} />         </div>      );   }});

那么我们还要创建我们需要的模型组件(也就是动态生成的相同DOM 元素) 如下图：

var LinksList=React.createClass({   render:function(){      return(    <li><a target="_blank" href={this.props.address}>{this.props.name}</a></li>);   }});

当我们的模型组件和动态所需的父组件都完毕的时候 ，那我们要创建最最重要的一个组件 我们所有的功能和实现代码 都在这个组件中 如下图：

var ClHeadRightFirst = React.createClass({   render:function(){      //console.log("classicTemplate ClHeadRightFirst render："+this.props.links.length);      if(this.props.links.length>0) {         var linksLists = this.props.links.map(function(links){            //console.log("classicTemplate ClHeadRightFirst render："+links.address);            //console.log("classicTemplate ClHeadRightFirst render："+links.name);            return(<LinksList address={links.address} name={links.name}/>);         });      }      return (            <ul className = "clHeadRightFirst">{linksLists}</ul>      );   }});

当我们看图的时候大家可能会被绕晕 其实我们这里用到了我们刚开始说的属性 this.props 那么links是怎么来的呢 这就要看下图 ：

setLinksParam.push({name: linksname, address: linksaddress});//console.log("panelSetting handleLinksSubmit"+setLinksParam);//console.log("panelSetting handleLinksSubmit"+setLinksParam);this.props.handleLinksSetting(setLinksParam);

getInitialState:function(){   return {themename:'classic',currentThemeComponent:ClassicTheme,currentLayoutStyle:'LayoutFirst',      mapview:null,mapkey:"QmeMeKyNwzpNzf9E498oHVjm",mapid:374,titlecolor:'#fff',      setparams:{titles:{title:"主标题",subTitle:"副标题"}},setlinksparam:[]};},

handleLinksSetting:function(setLinksParam){   //console.log('main handleSetting:'+setParams.titles);   if(setLinksParam){      this.setState({         setlinksparam:setLinksParam      });   }},

1.首先我们要在父组件中定义一个空数组setlinksparam[]  这个数据就是用来接受我们动态生成DOM 所需的数据 这个数据是根据具体需要来定义 我这里就是获得数值来填充动态DOM 内容和属性

2.我们还有定义一个方法 来接受数据 然后重新渲染DOM 这样我们才能看到我们动态的DOM 这里我们就用到了上面我们所说的 this.setState()方法， 

准备工作做完后我们要在下图的函数中来操作

var ClHeadRightFirst = React.createClass({   render:function(){      //console.log("classicTemplate ClHeadRightFirst render："+this.props.links.length);      if(this.props.links.length>0) {         var linksLists = this.props.links.map(function(links){            //console.log("classicTemplate ClHeadRightFirst render："+links.address);            //console.log("classicTemplate ClHeadRightFirst render："+links.name);            return(<LinksList address={links.address} name={links.name}/>);         });      }      return (            <ul className = "clHeadRightFirst">{linksLists}</ul>      );   }});

这里我们通过React中的this.props 属性来进行数据和方法的传递。 在这个组件中 我们拿到的是一个元素是对象的数组，我们使用数组API  map 来遍历它 把它的数据填充到我们的模型组件中去，

虽然我们的数据可以更改但是数据从哪里来呢  如下图：

var setLinksParam=[];

handleLinksSubmit:function(){   //var reg=/(\w+|[\u4e00-\u9fa5]+)/;   var reg=/[^\s]/;   var linksname=$('#panelsetting-linksname').val();   //console.log("panelSetting handleLinksSubmit"+reg.test(linksname));   var Const="http://";   var linksaddress=$('#panelsetting-linksaddress').val();   //console.log("panelSetting handleLinksSubmit"+reg.test(linksaddress));   if(reg.test(linksname)&&reg.test(linksaddress)) {      linksaddress=Const+linksaddress;       setLinksParam.push({name: linksname, address: linksaddress});      //console.log("panelSetting handleLinksSubmit"+setLinksParam);      //console.log("panelSetting handleLinksSubmit"+setLinksParam);      this.props.handleLinksSetting(setLinksParam);      $('#panelsetting-linksname').val('');      $('#panelsetting-linksaddress').val('');      $(".panelsetting-linksname").append('<li>'+linksname+'</li>');   }   return;},

我们看过这个代码都清楚  我们的数据是从真实的DOM中获取来 通过事件 构建一个数组  每次点击或其他事件来把数据push到数组中  这段的代码中最重要的是我们要调用父组件中 修改数据的方法

这样数据就传递过去了 我们就可以使用上述的方法来动态生成 DOM元素了 

温馨提示：我们的项目中使用React-bootstrap  比如我们要获取真实DOM的属性 或者值 的时候 React 中是有这个基本操作的 就是在创建组件的时候 为这个DOM元素设置 ref 属性

然后再方法中使用 this.refs.属性名称 来拿到真实DOM   但是我们一旦 使用了React-bootstrap 我们创建组件时候 都要用它特别给定的DOM标签 这时当我们还使用ref属性时 不会起到效果

我的理解就是React-bootstrap .js 内部做了封装 我们添加的ref 是添加不上去的 。所以我们用了 jq 或者原生DOM 操作

最后 说几句  这是我的第一篇博客  内容和质量肯定很low 在我写的时候就已经发现 自己脑中想的东西 没有办法清晰的表达出来   所以 希望各位看官和大神么多多给出意见  谢谢