[英]passing values dynamically to href attribute
将我的代码片段粘贴在下面作为参考:
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>);
});
}
我需要做的是将变量“link”传递给href。 链接包含最终 URL。 我已经尝试了一些我在上面的评论中显示的解决方案。
基本上我想在第一个循环中传递“ http://myurl+/reports/interactive/CustomersReport ”,在第二个循环中传递“ http://myurl+/reports/interactive/MapReport ”。
请帮助我了解我在这里可能出错的地方。 谢谢!
如果你想使用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'));
希望它会有所帮助。
构建 URL 变量,然后将它传递给花括号中的 href ,如下所示:
return(<a href={link}>Report </a>);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.