Question

我是新手做出反应，我正在努力开始使用它。
出于这个原因，我正在尝试创建一个像角度英雄塔的应用程序（显示英雄列表，通过点击其中一个，你导航到详细页面）。
这是我的代码

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'));

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

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

Answer 1

问题在于这一行：

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

这会呈现组件Test，但不会将数据作为prop传递。

避免这种情况的一种方法是将Test的默认道具设置为空数组：

class Test extends React.Component {
    static defaultProps = {
      persons: []
    };

    render() {
       // ...
    }
}

Answer 2

我认为这些问题存在问题：

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

根据定义，li - 标记没有名为p的属性。此外，只有父元素（此处为li - 标记）只需要一个键。

所以这些行看起来应该是这样的：

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

我希望这可以解决您的问题。

将.map（）解释为属性

2 个答案: