Javascript react.map（）被解释为属性

我是个反应新手，我正试着开始
出于这个原因，我正在尝试创建一个类似angular中的英雄之塔（tower of heroes in angular）的应用程序（它显示一个英雄列表，通过单击其中一个，您可以导航到详细信息页面）。
这是我的密码

从“React”导入React；
从“react dom”导入react dom；
进口{
路线,，
转换
哈希路由器，
链接
}从“反应路由器dom”
类测试扩展了React.Component{
render（）{
var prod=this.props.persons；
返回(

{prod.map（p=>(
{p.name}
）
)}

{
}
)
}
}
类详细信息扩展了React.Component{
render（）{
返回(
{this.props.person.name}

)
}
}
个人变量=[
{id:'1'，name:'name1'，age:'20'}，
{id:'2'，name:'name2'，age:'21'}，
{id:'3'，姓名：'name3'，年龄：'22'}，
{id:'4'，name:'name4'，age:'23'}，
{id:'5'，name:'name5'，age:'24'}，
{id:'6'，姓名：'name6'，年龄：'25'}
];
ReactDOM.render(
,
document.getElementById（'root'）问题是这一行：

<Route exact path='/' component={Test} />

我认为这些话有问题：

{prod.map(p => (
    <li key={p.id} p={p}>
        <Link key={p.id} to='/detail'>{p.name}</Link>
    </li>
))}

我希望这能解决您的问题。
错误意味着
this.props.persons
未定义，很可能您没有正确地传递它。这一部分中有两个罪魁祸首：
@Nit，感谢您的响应，但是您可以看到我将persons props从render（）传递到测试组件
@bazzells，1）正如您所说的id元素属性不存在，实际上我只是忘记添加。我做了一个包含它的更新，但是错误仍然存在。你是对的，我删除了``，第一个错误消失了，但是sconde仍然存在。因此，如果我使用你的解决方案，我会得到一些错误，因为
this.props.persons.map（p=>…；
仍然未知，如果我直接使用persons，我将无法显示道具传递的数据
{prod.map(p => (
    <li key={p.id} p={p}>
        <Link key={p.id} to='/detail'>{p.name}</Link>
    </li>
))}

{prod.map(p => (
    <li key={p.id}>
        <Link to='/detail'>{p.name}</Link>
    </li>
))}