开发者问题收集

React：如何将“const Todo =（{todo，todoList，remove}）=> {”更改为“export default class Todo extends React.Component {”

2017-10-30
229
reactjs

我有这个组件（至少，我认为它被称为“组件”！）： 

const Todo = ({todo, todoList, remove}) => {
    let status = todo.opened ? 'opened' : 'closed';
    return (
        <li className={"todo " + status} data-endpoint={todo['@id']}>
            <form onChange={this.changeStatus}>
                <a href={window.Routing.generate('todo_list_todo_show', {account: todoList.account.id, list: todoList.id, todo: todo.id}, true)}>{todo.name}</a>
            </form>
        </li>
    );
}

export default Todo

现在我想添加一些其他方法来简单地改变 Todo 的状态，将其设置为打开或关闭选中一个简单的复选框。

所以我想将语法更改为此： 

export default class Todo extends React.Component {
    constructor(props) {
        super(props);
    }

    render({todo, todoList, remove}) {
        let status = todo.opened ? 'opened' : 'closed';
        return (
            <li className={"todo " + status} data-endpoint={todo['@id']}>
                <form onChange={this.changeStatus}>
                    <a href={window.Routing.generate('todo_list_todo_show', {account: todoList.account.id, list: todoList.id, todo: todo.id}, true)}>{todo.name}</a>
                </form>
            </li>
        );
    }
}

这会触发错误：

Todo.jsx:21 Uncaught TypeError: Cannot read property 'todo' of undefined

第 21 行是 render 方法的签名： 

    render({todo, todoList, remove}) {

为什么我会收到此错误？

这两种语法之间有什么变化？是否与 JSX 有关以及组件如何用纯 Javascript 进行转译？

如何使用“完整”语法？

哪些名称正确，可以识别第一种语法和第二种语法？

2个回答

第一种是无状态组件，或者说是函数组件，它将 props 和 context 作为参数传递。第二种是类组件，并且 props 被分配给 this.props 。请参阅文档中的 组件和 Props 。

props 不会作为参数传递给 render() 。将 this.props 解构为您的变量。 

render() {
    const {todo, todoList, remove} = this.props;
    const status = todo.opened ? 'opened' : 'closed';

    return (
        <li className={"todo " + status} data-endpoint={todo['@id']}>
            <form onChange={this.changeStatus}>
                <a href={window.Routing.generate('todo_list_todo_show', {account: todoList.account.id, list: todoList.id, todo: todo.id}, true)}>{todo.name}</a>
            </form>
        </li>
    );
}
Ori Drori
2017-10-30

当使用函数作为组件时，该函数会传递 props。从 React.Component 扩展时，render 不会传递任何内容，但 props 在实例上可用作 this.props 。

因此 render 需要变成： 

render() {
  const { todo, todoList, remove } = this.props;
  // do your thing
}
Alex Guerra
2017-10-30