傳遞值動態地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」，在第二個循環中通過「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')); 

希望這會有所幫助。