React.js

Question

根据第页中的示例：https://redux.js.org/basics/usage-with-react

我们有以下项目：

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

此外，我们还有：

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

有人能告诉我上面代码的{…todo}是什么吗？

我知道...运算符是一种传播语法，用于let say as[... todos， newTodoItem]（将新的todo项目连接到旧的todos列表）。但是，在上面的例子中，todo项目不是一个数组，它似乎生成了一个对象。因此，对我来说，它看起来像{... todo}等于{todo}。

另外，在组件上分配了什么样的属性？

Answer 1

const obj = {a: 1, b: 2, c: 3};

<代码>

外部反应，如果const test={a:1，b:2}，那么const x={test}//es6特性类似于const x={test:test}。这与constx={test:{a:1，b:2}}

其中，

function MyComponent(props) {
 // What is props.? to access obj
}

所以，你用一个有名字的道具，

<MyComponent x={obj} />

function MyComponent(props) {
 // props.x has obj
 // props.x = obj
 console.log(props.x);
 return <div />
}

但是，扩散运算符自动给出道具名称，对象键和值作为对象的值，如本答案开头所示。

正如您在问题中所说，const newTodos=[…todos，newItem]使用从todos展开的旧todo创建一个新数组，并添加一个额外的newItem。如果您没有传播todos，它将创建newTodos=[[todo1，todo2]，newItem]。

Answer 2

... todo用于将道具传递给Todo组件。在Todo道具中，你可以看到有两个可变的道具。因此...操作员将其传播到Todo组件的道具

Answer 3

…也可用于传播对象，而不仅仅是阵列。例如

// Using rest syntax here
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; 
x; // 1
y; // 2
z; // { a: 3, b: 4 }

// Using spread here
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

在上面的情况下，todos是一个对象数组，其中包含键完成的和文本。而不是像这样手动传递道具-

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} completed={todo.completed} text={todo.text} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

我们使用扩展语法添加键值对作为道具。你可以把它看作是句法上的糖。