React中插入生成代码片段

1、第一种方式

  createHtmlCommonFun() {
        let waterfallLeft = document.getElementById('waterfallLeft'),
            waterfallRight = document.getElementById('waterfallRight'),
            _domLeft = document.createElement('div'),
            _domRight = document.createElement('div'),
            htmlLeft = "",
            htmlRight = "",
            html = '';
        const {dataList} = this.state;
        dataList.forEach(function (item, index) {
            html = `
            <div class="imgListWrap">
            <div class="pic">
                <div class="imgBox">
                    <img alt="列表图片" src="${item.icon}" class='larry_waterfall_img' />
                </div>
                <p class="title">${item[`title_${item.lang}`]}</p>
                <div class="price">¥ ${item.list_price_cny.toFixed(2)}</div>
                <div class="from">${item.site.toUpperCase()}</div>
            </div>
           </div>
            `;
            if (index % 2 === 0) {
                htmlLeft += html;
            } else {
                htmlRight += html;
            }
        });
        _domLeft.innerHTML = htmlLeft;
        _domRight.innerHTML = htmlRight;
        // _domLeft.innerHTML = htmlLeft.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );
        waterfallLeft.appendChild(_domLeft);
        waterfallRight.appendChild(_domRight);
    }



2、第二种方式

  createElementCommonFun(dataList, that) {
        let waterfallLeft = document.getElementById('waterfallLeft'),
            waterfallRight = document.getElementById('waterfallRight'),
            fragLeft = document.createDocumentFragment(),
            fragRight = document.createDocumentFragment(),
            oBox = null,
            oPic = null,
            oImgBox = null,
            oImg = null,
            oTitle = null,
            oPrice = null,
            oFrom = null;
        for (let i = 0; i < dataList.length; i++) {
            oBox = document.createElement('div');
            oPic = document.createElement('div');
            oImgBox = document.createElement('div');
            oImg = document.createElement('img');
            oTitle = document.createElement('p');
            oPrice = document.createElement('div');
            oFrom = document.createElement('div');

            oBox.className = 'imgListWrap';
            oBox.onclick = that._handleGoodsDetail.bind(this, dataList[i]);
            if (i % 2 === 0) {
                fragLeft.appendChild(oBox);
            } else {
                fragRight.appendChild(oBox)
            }
            oPic.className = 'pic';
            oBox.appendChild(oPic);
            // 图片盒子
            oImgBox.className = 'imgBox';
            oPic.appendChild(oImgBox);
            oImg.setAttribute('src', dataList[i].icon);
            oImg.className = 'larry_waterfall_img';
            oImgBox.appendChild(oImg);
            // 标题
            oTitle.className = 'title';
            oTitle.innerText = dataList[i][`title_${dataList[i].lang}`];
            oPic.appendChild(oTitle);
            // 价格
            oPrice.className = 'price';
            oPrice.innerText = `¥ ${dataList[i].list_price_cny.toFixed(2)}`;
            oPic.appendChild(oPrice);
            // 地址
            oFrom.className = 'from';
            oFrom.innerText = dataList[i].site.toUpperCase();
            oPic.appendChild(oFrom);
        }
        waterfallLeft.appendChild(fragLeft);
        waterfallRight.appendChild(fragRight);
    },