如何在reactjs中动态创建链接？

debugcn 发表于 Dev

维诺特·克里希南（Vinoth Krishnan）

我们已经通过API动态获得菜单导航。如何动态传递菜单导航。

API响应。

http://jsoneditoronline.org/?id=7d4f2ddbabb7eba80dde69867989f0f3

这里的代码。

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;

玛雅克·舒克拉（Mayank Shukla）

res.data.result_set从服务器获取数据后，请存储in状态变量，

this.setState({data: res.data.result_set});

然后使用此函数动态生成菜单项：

_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>
    )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。