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

时间：2021-04-09 20:40:41
在我们的产品中有很多需要点击 或者回调函数执行时 生成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 在我写的时候就已经发现 自己脑中想的东西 没有办法清晰的表达出来   所以 希望各位看官和大神么多多给出意见  谢谢  


















































































 


































标签：

相关文章