javascript - 无法读取未定义的属性 'props' - React Router

Question

我正在尝试使用 react 服务器进行嵌套路由。但我在浏览器控制台中收到一个错误，指出

Uncaught TypeError: Cannot read property 'props' of undefined

这是 react 代码

    const App = () => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {this.props.children}
        </div>
    );
};

const View1 = () => {
    return(
        <h3>{'Welcome to View1'}</h3>
    );
};


render(
    <Router>
        <Route component={App} path="/">
            <Route component={View1} path="/view1"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

知道可能出了什么问题吗？

Answer 1

箭头函数没有词法this。函数组件接收 props 作为函数参数。所以正确的方法是......

const App = (props) => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {props.children}
        </div>
    );
};

在此处了解更多信息 https://facebook.github.io/react/docs/components-and-props.html