react .map() 解释为属性答案

【问题标题】：react .map() interpreted as a propertyreact .map() 解释为属性
【发布时间】：2018-03-07 01:04:21
【问题描述】：

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

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Route,
    Switch,
    HashRouter,
    Link
} from 'react-router-dom'

class Test extends React.Component {
    render() {
        var prod = this.props.persons;
        return (
            <div>
                <nav>
                    <ul>
                        {prod.map(p => (
                            <li key={p.id} p={p}><Link key=                         {p.id} to='/detail'>{p.name}</Link>                                 </li>)
                        )}
                    </ul>
                </nav>
                {
                    <Switch>
                        <Route exact path='/' component=                              {Test} />
                        <Route path='/detail' component=                              {Detail} />
                    </Switch>}
            </div>
        )
    }
}
class Detail extends React.Component {
    render() {
        return (
            <p> {this.props.person.name} </p>
        )
    }
}
var PERSONS = [
    {id:'1', name: 'name1', age: '20' },
    {id:'2', name: 'name2', age: '21' },
    {id:'3', name: 'name3', age: '22' },
    {id:'4', name: 'name4', age: '23' },
    {id:'5', name: 'name5', age: '24' },
    {id:'6', name: 'name6', age: '25' }
];
ReactDOM.render(
    <HashRouter>
        <Test persons={PERSONS} />
    </HashRouter>,
    document.getElementById('root'));

在浏览器中我得到了那个错误：

我还注意到控制台中还有其他错误：

【问题讨论】：

错误表示this.props.persons 未定义，很可能您没有正确传递它。
这部分的两个罪魁祸首：<li key={p.id} p={p}...。 (1) 您将键绑定到每个人员对象的 id，您尚未在 PERSONS 数组中的任何人员对象上定义该键。 (2) p 不作为原生 HTML 元素 li 的 property 存在。
@Nit，感谢您的回复，但正如您所见，我通过了 people 道具，从渲染 ( ) 到 Test 组件