|
阅读:8094回复:0
[react]React router error bug:using incorrect casing. Use PascalCase for React components
在生成动态路由使用时,代码如下:
<Route key={'r1'+index} path={value.url} component={ value.component}>报如下3个错误:index.js:1446 Warning: <{About} /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. The above error occurred in the <{About}> component: Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('{About}') is not a valid name. 原因: 动态路由,生成的代码是: <Route key="r11" path="/About" component="About">发现了没,component的值成了字串,component的值,必须是个组件对象,正常代码如下: <Route key="r11" path="/About" component={About}> 解决:如何将字符串,转成对应的变量 思路 :比如服务器返回组件String ‘< ComponentName />’, 用正则取到ComponentName, 把React组件存到一个 Components对象 选择组件 Components[ComponentName],放到render渲染 。 参考:http://bugshouji.com/shareweb/t813 |
|
|