Question

我正在尝试将入口点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;

这是我尝试将其重写为课程。它不起作用。我收到错误：＆＃39; ReferenceError：道具未定义＆＃39;

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;

Answer 1

一旦上课

，你需要this.props

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

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

Answer 2

add this =＆gt; this.props.children

试图将App.js重写为一个类

2 个答案: