Reactjs 尝试将App.js重写为类

我正在尝试将入口点App.js javascript文件作为一个类重新编写。我这样做是因为我想在用户单击注销链接时调用onClick函数

以下是当前代码：

import React, { PropTypes } from 'react';
import { IndexLink, Link } from 'react-router';

const App = (props) => {
    return (
        <div>
            <IndexLink className="mypad" to="home">Home</IndexLink>
            <Link className="mypad" to="">Log Out</Link>
            <br/>
            <br/>
            {props.children}
        </div>
    );
};

App.propTypes = {
    children: PropTypes.element
};

export default App;

import React，{PropTypes}来自'React'；
从“react router”导入{IndexLink，Link}；
常量应用=（道具）=>{
返回(
家
注销




{props.children}
);
};
App.propTypes={
子项：PropTypes.element
};
导出默认应用程序；

这是我作为一个类重新编写的尝试。它不起作用。我得到错误：“ReferenceError:props未定义”

class App extends React.Component  {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <div>
                <IndexLink className="mypad" to="home">Home</IndexLink>
                <Link className="mypad" to="">Log Out</Link>
                <br/>
                <br/>
                {props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.element
};

export default App;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
家
注销




{props.children}
);
}
}
App.propTypes={
子项：PropTypes.element
};
导出默认应用程序；

一旦它成为一个类，你就需要做

这个.props

  <div>
    <IndexLink className="mypad" to="home">Home</IndexLink>
    <Link className="mypad" to="">Log Out</Link>
    <br/>
    <br/>
    {this.props.children}
  </div>

家
注销




{this.props.children}

---

当您将组件作为函数编写时，props将作为参数传入。当您将其作为一个类执行时，道具将绑定到组件对象的实例

添加此=>

此.props.children