Question

我无法理解params的语法。在这种情况下（{todo，destroyTodo}）实际意味着什么？为什么我们不能只使用“道具”作为参数？

 const TodoItem = ({todo, destroyTodo}) => {
  return (
    <div>
      {todo.text}
      <span onClick={destroyTodo}> x </span>
    </div>
  )
}

Answer 1

您显示的代码使用javascript函数创建一个新组件。 {todo,destroyTodo}是一个json对象，它作为props传递给组件，并被解构为2个变量，称为todo和destroyTodo。这是

的简写

const TodoItem = (props) => {
  const  {todo, destroyTodo} = props;
  return (
    <div>
      {todo.text}
      <span onClick={destroyTodo}> x </span>
    </div>
  )
}

作为类创建的相同组件将是

class TodoItem extends React.Component{

render(){
   return (
    <div>
      {this.props.todo.text}
      <span onClick={this.props.destroyTodo}> x </span>
    </div>
  )
}
}

Answer 2

你实际上传递了你的道具对象，但是在你做<TodoItem {...props}/>的情况下，你传递了来自父母的所有道具并需要指出它

const TodoItem = (props) => {
  return (
    <div>
      {props.todo.text}
      <span onClick={props.destroyTodo}> x </span>
    </div>
  )
}

无法理解params的语法

2 个答案: