Reactjs 动态CMS页面如何响应JS？

我们正在使用API通过API获取CMS页面标题和其他详细信息。我们创建了菜单导航，如Home、About、We are。如何加载动态页面内容以及如何创建渲染

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
}
componentDidMount（）{
axios.get（'http://**.com/**/api/products/navigation_menu？app_id=27D8B4AD-170A-4B8E-9852-E48EC5EB42C8'）
。然后（res=>{
this.setState（{data:res.data.result_set}）；
});
}
_createMenuItems（）{
返回此.state.data.map（（加载数据，索引）=>
{loaddata.menu\u custom\u title}
);
}
render（）{
返回(

{this.\u createMenuItems（）}

{this.props.children}
)
}
}
导出默认应用程序；

以下是一个基本示例，可以帮助您入门。我基本上是使用

App

组件对所有路线进行渲染。更好的方法可能是动态地为页面创建路由，然后为特定页面使用特定组件

const{Router，Route，Link}=ReactRouter；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
}
componentDidMount（）{
axios
.得到(
"https://cdn.rawgit.com/fabe/6929b34fd6f30a13e85ddea480c7053d/raw/5fd6fbe535713c52fd2166e6d0f2d0de01381ff3/gistfile1.json"
)
。然后（res=>{
this.setState（{data:res.data.result_set}）；
});
}
_getSlug（slug）{
返回段塞分裂（“？”）[0]；
}
_createMenuItems（）{
返回此.state.data.map（（加载数据，索引）=>(

{loaddata.cmspage_title}

));
}
render（）{
const{data}=this.state；
const{splat}=this.props.params；
让描述=”；
//我正在将'description'从'data'状态设置为相应的状态。'params.splat'是React路由器的slug。
data.map（第=>{
让pageslaug=this.\u getSlug（page.cmspage\u slug）；
if（pageSlug==splat）{
description=page.cmspage\u meta\u description；
}
});
返回(

{this.\u createMenuItems（）}

{说明}
);
}
}
//对每条路线使用“App”。也许不是解决这个问题的最好方法，但它给了你一个想法。
ReactDOM.render(
(
),
document.getElementById（“视图”）
);

谢谢，它正在工作。但是传递一些查询字符串值。如何删除此values.Ex。1.它起作用了。谢谢：）
class App extends React.Component {
  constructor(props) {
       super(props);

        this.state = { data: [] };

   }

  componentDidMount() {

    axios.get('http://****.com/***/api/products/navigation_menu?app_id=27D8B4AD-170A-4B8E-9852-E48EC5EB42C8')
      .then(res => {
          this.setState({data: res.data.result_set});

      });
  }
  _createMenuItems(){
    return this.state.data.map((loaddata, index)=>
        <li key={index}><Link to={loaddata.pro_cate_slug} >{loaddata.menu_custom_title}</Link></li>
    );
}
   render() {
      return (
         <div>
            <ul>

               {this._createMenuItems()}
            </ul>

           {this.props.children}
         </div>
      )
   }
}
export default App;