Question

我知道为了让{...todo}在Todo组件中工作，它必须转换为类似于completed=false text="clean room"之类的道具，但是传播运营商如何做到这一点？不会将当前的{...todo}转换为{completed:false}, {text:"clean room"}吗？

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

Answer 1

es6传播运算符确实可以通过转换{...todo} to {completed:false}，{text:"clean room"}来实现。

但是，在JSX中使用相同的运算符，但它不一定相同。

来自msdn docs，

扩展语法允许在其中的位置扩展表达式多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于解构赋值）预期。

遵循这个想法，创建了JSX spread operator。根据{{3}}，

数组已经支持...运算符（或扩展运算符）在ES6中。还有针对Object Rest和的ECMAScript提议传播属性。我们正在利用这些支持和开发标准以便在JSX中提供更清晰的语法。

由于这已经遵循了传播运营商的想法，两者的统一确实是社区的一个受欢迎的想法

Answer 2

如前所述，这里使用扩展语法与ES6无关，它是一个JSX结构。

JSX只是React.createElement调用的语法糖。道具实际上作为对象传递给该函数。

您可以使用Babel repl查看JSX的转换方式。

没有传播道具：

// In
<Component foo="bar" baz="42" />

// Out
React.createElement(
  Component,
  { foo: "bar", baz: "42" }
);

传播道具：

// In
<Component foo="bar" {...xyz} baz="42" />

// Out
React.createElement(
  Component,
  Object.assign({ foo: "bar" }, xyz, { baz: "42" })
);

所以你可以看到，如果道具包含一个传播道具，它们被分成多个对象并简单地合并。

es6如何将运算符扩展到一个对象上进行道具转换？

2 个答案: