Question

首先，我根据liTagsPagination大小数组创建一个带<a>元素的变量sectionsXml。然后将该变量插入htmlPagination。最后使用所有html内容呈现htmlPagination变量。

但视图中的输出只是纯文本中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

在渲染中使用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>
    )
  }

Answer 2

liTagsPagination的内容将以纯文本形式显示bcoz您正在形成一个简单的字符串。这将显示为字符串。相反，您应该使用JSX生成HTML，因为代码的其他部分是由HTML生成的。

您可以形成JSX而不是HTML，这将获得您想要的行为。这将创建一个li标记数组，可以直接呈现。在循环形成JSX标记时，key很重要。

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

如果您只想使用HTML，那么您必须使用不是首选的dangerouslySetInnerHTML。

Answer 3

您正在JSX语言中呈现导致问题的字符串，您需要更改代码以执行以下操作：

-m

Answer 4

对于您提供的示例，最好只使用jsx而不是创建html字符串并插入它。

render() {
   const liTagsPagination = this.state.sectionsXml.map(function(elementSection, indexSection) {
      return (
         <li key={indexSection}>
           <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>
   )
}

但是，如果您遇到绝对需要插入html字符串的情况，则可以使用dangerouslySetInnerHtml（https://facebook.github.io/react/docs/dom-elements.html）

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

4 个答案: