[英]How to create Link dynamically in reactjs?
We have dynamically get menu navigation in through the API. 我们已经通过API动态获得菜单导航。 how to pass menu navigation dynamically.
如何动态传递菜单导航。
API Response. API响应。
http://jsoneditoronline.org/?id=7d4f2ddbabb7eba80dde69867989f0f3 http://jsoneditoronline.org/?id=7d4f2ddbabb7eba80dde69867989f0f3
Here code. 这里的代码。
componentDidMount() {
axios.get('http://****.com/****/api/products/navigation_menu?app_id=*******8')
.then(res => {
const ajaxresponse = res.data.result_set;
console.log();
ajaxresponse.forEach(function(loaddata) {
console.log(loaddata.menu_custom_title);
});
});
}
render() {
return (
<div>
<ul>
<li><Link to="/home" >{this.state.home}</Link></li>
<li><Link to="/about" >{this.state.about}</Link></li>
<li><Link to="/contact" >{this.state.contact}</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
Store the res.data.result_set
in state variable once the data is fetched from server, 从服务器获取数据后,将
res.data.result_set
存储在状态变量中,
this.setState({data: res.data.result_set});
Then Use this function to dynamically generate the menuitems: 然后使用此函数动态生成菜单项:
_createMenuItems(){
return this.state.data.map((loaddata, index)=>
<li key={index}><Link to={/*put the link here*/} >{loaddata.menu_custom_title}</Link></li>
);
}
render() {
return (
<div>
<ul>
<li><Link to="/home" >{this.state.home}</Link></li>
<li><Link to="/about" >{this.state.about}</Link></li>
<li><Link to="/contact" >{this.state.contact}</Link></li>
{this._createMenuItems()}
</ul>
{this.props.children}
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.