Extracting parts into components error: Unexpected token, expected "..."

Question

我在将部分代码提取到单独的组件时遇到该错误。我找不到问题出在哪里。

这是什么意思？

Unexpected token, expected "..."

完整代码：

Answer 1

Person 组件将 person 作为 prop。在错误消息中，它表明您错误地将 props 分配给了 Person 组件。应该是这样的：

// App.js - starting at line 79
<ul>
  {persons.map((person) => (
    <Person key={person.id} person={person} />
  ))}
</ul>

如果 Person 组件是这样的：

// Person.js
import React from "react";

const Person = ({ name, number }) => {
  return (
    <li>
      {name} {number}
    </li>
  );
};

export default Person;

您可以像这样将 name 和 number 属性传递给 Person 组件：

// App.js
<ul>
  {persons.map((person) => (
    <Person key={person.id} {...person} />
  ))}
</ul>

// which is equivalent to
<ul>
  {persons.map((person) => (
    <Person key={person.id} name={person.name} number={person.number} />
  ))}
</ul>

这是传播 (...) 道具的常见模式。在这种情况下，这意味着您将一个人的所有属性传递给 Person 组件。

Extracting parts into components error: Unexpected token, expected "..."

Extracting parts into components error: Unexpected token, expected "..."

components

reactjs