ReactJs에서 HTML 요소로 변수를 렌더링하는 방법은 무엇입니까?

Question

먼저 크기 배열에 따라 개의 요소로 변수 liTagsPagination을 만듭니다. 그리고 그 변수를 htmlPagination에 삽입하십시오. 그리고 마지막으로 htmlPagination을 모든 html 콘텐츠와 함께 렌더링하십시오.

그러나보기의 출력 내용은 일반 텍스트의 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

li 태그의 배열을 만드는 렌더링에 사용 map 대신 foreach. 문자열 연결을 사용하지 마십시오. 간단한 문자열을 형성하는 bcoz

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의 내용은 일반 텍스트로 표시됩니다. 이 문자열로 표시됩니다. 오히려 코드의 다른 부분이 HTML에 의해 생성되므로 JSX를 사용하여 HTML을 생성해야합니다.

원하는 동작을 얻을 수있는 HTML 대신 JSX를 작성할 수 있습니다. 그러면 직접 렌더링 할 수있는 li 태그의 배열이 만들어집니다. key은 JSX 태그를 형성하기 위해 반복 할 때 중요합니다. 당신은 단지 HTML을 사용하려면

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

, 당신은 바람직하지 않다 dangerouslySetInnerHTML의 사용을해야한다. 그냥 jsx를 사용하는 것이 좋을 것이다, 당신이 제공 한 샘플에 대한

let liTagsPagination = this.state.sectionsXml.map((element, index) => { 
    return (
     <li> 
      <a id={ `_sectionPage${index}` } 
       className="section"> 
       { index + 1 } 
      </a> 
     </li> 
    ); 
}); 

Answer 3

당신은 당신의 문제를 일으키는 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> 
    ) 
} 

그러나 경우에, 당신은 당신이 절대적으로 답례로 매핑되지 않은 다른 요소가있을 수있는 반면, 당신은 dangerouslySetInnerHtml (https://facebook.github.io/react/docs/dom-elements.html)

Answer 4

: