REF以下のように私のスニペットを貼り付けるhref属性に動的に

Question

を値を渡す：

getInitialState: function() 
{ 
    return { 
     repoLinks: [ 
      "/reports/interactive/CustomersReport", 
      "/reports/interactive/MapReport" 
     ] 
} 
render: function(){ 
     var repoLinks = this.state.repoLinks; 
     repoLinks = repoLinks.map(function(item, index) 
     { 
      var home = "http://myurl"; 
      var reportLink = {item}; 
      var link = home + reportLink.item; 
      console.log(link); 

      // HyperLink1.NavigateUrl = link; 

      // return(<a href='"link"'>Report </a>); 

      // return(<a href="'link'">Report </a>); 

      // <a href="link" class='dynamicLink'>Report </a>; 

      /* 
      <div> 
       <a onclick="javascript:GoToUrl();"> Reports </a> 
       <script type="text/javascript"> 
        function GoToUrl() 
        {return("http://myurl" + {item});} 
       </script> 
      </div> 
      */ 

      /*    
       <div> 
        <a onclick="return Try();"> Reports </a> 
        <script type="text/javascript"> 
         function Try() 
         {return(link_final);} 
        </script> 
       </div>    
      */ 

      return(<a href= "link">Report </a>); 
     }); 
} 

私がする必要がどのようなことのhrefに変数「リンク」を渡すことです。リンクには最終的なURLが含まれています。私は、上記のコメントに示したいくつかのソリューションを試しました。

基本的には、最初のループでは "http://myurl+/reports/interactive/CustomersReport"、2番目のループでは "http://myurl+/reports/interactive/MapReport"とします。

どこが間違っているのか理解してください。 ありがとう！

Answer 1

ES6と一緒に行きたい場合は、私は通常、よりクリーンなコードが好きです。

import React from 'react'; 
import { render } from 'react-dom'; 

class App extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     repoLinks: ["/reports/interactive/CustomersReport", 
        "/reports/interactive/MapReport"] 
    } 
    } 
    render() { 
    var { repoLinks } = this.state 
    var home = "http://myurl" 
    repoLinks = repoLinks.map((item,index) => { 
     return `<a key=${index} href=${home}${item}>Link</a>` 
    }) 
    return (<h1>{repoLinks}</h1>) 
    } 
} 
render(<App />, document.getElementById('root')); 

希望します。