Question

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

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

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

所以我想将语法更改为：

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：无法读取属性'todo' 未定义

第21行是render方法的签名：

    render({todo, todoList, remove}) {

为什么我收到此错误？

两种语法之间有什么变化？是否与JSX有关，而hw组件是用纯Javascript编译的？

如何使用“完整”语法？

哪个是用于标识第一个语法的正确名称？第二个是？

Answer 1

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

所以渲染需要成为：

render() {
  const { todo, todoList, remove } = this.props;
  // do your thing
}

Answer 2

1st是无状态组件或函数组件，它将props和context作为params传递。第二个是类组件，并且道具被分配给this.props。请参阅文档中的Components and 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>
    );
}

React：如何更改“const Todo =（{todo，todoList，remove}）=＆gt; {”to“导出默认类Todo扩展React.Component {”

2 个答案: