我有一组对象,我想用它们来渲染一些模板化页面。我尝试通过数组进行映射并为每个对象返回一个路由:
const Component = () => (
<div className={`${styles["body"]}`}>
{heroesArray.map((hero, i) => {
let randomQuote = getRandomQuote(hero.quotes);
let path = hero.name
.toLowerCase()
.split(" ")
.join("_");
return (
<div className="thumbnail">
<Thumbnail
key={i}
hero={hero}
randomQuote={randomQuote}
path={path}
/>
<Route <!-- HERE I CREATE A ROUTE -->
path={path}
component={() => <HeroPage hero={hero} />}
key={i + 365}
/>
</div>
);
})}
</div>
);
缩略图包含在一个链接标签中,该标签通向作为道具传递的路径。当我尝试单击其中一个缩略图时,没有渲染任何内容。
完整代码和工作应用程序在这里:https : //repl.it/repls/NoteworthyDetailedForm
我究竟做错了什么?
编辑:
我在这里工作:https : //repl.it/@wichopy/NoteworthyDetailedForm
我做了几件事。
路径应以正斜杠 ('/') 开头。我在 Main 组件中定义了所有路由,并将其放在一个 Switch 中,该 Switch 一次只能渲染一条路由。
原文:Route 中的组件 prop 应该只是未实例化的组件,React 路由器将处理渲染它并将 props 传递给它。
如果你想控制按下什么道具,使用渲染而不是组件:
<Route <!-- HERE I CREATE A ROUTE -->
path={path}
render={(props) => <HeroPage hero={hero} {...props}/>}
key={i + 365}
/>
如果您打算只使用一个组件:
<Route <!-- HERE I CREATE A ROUTE -->
path={path}
component={HeroPage}
key={i + 365}
/>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句