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}是什么吗？

我知道...运算符是一种扩展语法，可以说[... todos，newTodoItem]（将新的待办事项与旧的待办事项列表连接起来）。但是，在上面的示例中，待办事项不是数组，似乎它生成了一个对象。因此，对我来说{... todo}等于{todo}。

还要在组件上分配什么样的属性？

Answer 1

...也可以用于传播对象，而不仅仅是数组。例如，

// 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是包含键completed和text的对象数组。而不是像这样手动传递道具-

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

我们使用传播语法将键值对添加为道具。您可以将其视为语法糖。

Answer 2

... todo用于将道具传递给Todo component。在Todo原型中，您可以看到有两个可变类型的原型。所以...运算符将它传播（传递）到Todo组件的道具

Answer 3

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

<MyComponent {...obj} />与<MyComponent a={1} b={2} c={3} />相同。因此，您可以使用spread运算符...从对象或数组中取出元素。

在React外部，如果const test={a: 1, b:2 }，则const x = {test} //es6 feature与const x = {test: test}类似。因此，这与const x = {test: {a: 1, b:2}}

<MyComponent {obj} />会在React中产生错误，因为在MyComponent中，可用于访问传递的obj的道具名称是什么？空无一人。因此，错误。

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 />
}

但是，传播算子会自动给出具有对象键和值的props名称，作为对象的值，如该答案的开头所示。

正如您在问题中说的，const newTodos = [...todos, newItem]创建了一个新数组，其中的旧待办事项从todos展开，并添加了额外的newItem。如果您没有传播todos，它将创建newTodos = [[todo1, todo2],newItem]。

React.js和[...]（传播）语法

3 个答案: