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タグを作成するためにループするときに重要です。

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の使用をしなければなりません。それだけで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）を使用することができ、あなたは絶対にHTML文字列を挿入する必要があるシナリオが発生したした場合は

Answer 4

：