javascript - 如何在 ReactJs 中使用 HTML 元素呈现变量？

Question

首先我创建了一个变量 liTagsPagination与 <a>元素取决于 sectionsXml大小数组。然后将该变量插入 htmlPagination .最后渲染 htmlPagination包含所有 html 内容的变量。

但是 View 中输出的只是liTagsPagination的内容在纯文本中。在 DOM 中 liTagsPagination附加到 <ul>但不是作为一个不同的元素。

render() {
 let liTagsPagination = "";
 this.state.sectionsXml.forEach(function(elementSection, indexSection) {
    liTagsPagination += "<li><a id=\"_sectionPage"+ indexSection +"\" className=\"section\">"+(indexSection+1)+"<\/a><\/li>";
 });

 const htmlPagination = (
   <div id="pages-nav-branch" className="col-xs-12 text-center">
       <ul className="pagination pagination-section pagination-sm">
           {liTagsPagination}
       </ul>
   </div>
 );

 return(
    <div>
       {htmlPagination}
    </div>
 )
}

Answer 1

在 render 中使用 map 而不是 foreach 来创建 li 标签的数组。不要使用字符串连接。

render() {

    let liTagsPagination= this.state.sectionsXml.map(function(elementSection, indexSection) {
         return <li><a id={"_sectionPage"+ indexSection} className="section">{indexSection+1}</a></li>;
    });

    const htmlPagination = (
      <div id="pages-nav-branch" className="col-xs-12 text-center">
          <ul className="pagination pagination-section pagination-sm">
              {liTagsPagination}
          </ul>
      </div>
    );

    return(
       <div>
          {htmlPagination}
       </div>
    )
  }