babeljs - 为什么jsx在这段代码中需要三个点？

Question

我找到了much upvoted answer对于一个问题，代码如下:

var condition = true;

return (
  <Button {...condition ? {bsStyle: 'success'} : {}} />
);

为什么需要...？如果我省略它，babel 就会向我提示:

repl: Unexpected token, expected ...

它看起来像展开语法，但condition是一个 bool 值。我无法找到解释正在发生的事情的文档。

Answer 1

如果您查看 MDN: Spread operator :

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

如果您看到 jsx 语法中的扩展运算符来计算表达式，那么

<Button {...condition ? {bsStyle: 'success'} : {}} />

会变成这样，(在 babel 使用 React Bootstrap 示例运行之后):

_react2.default.createElement(_reactBootstrap.Button, 条件 ? { bsStyle: '成功' } : {})

也可以写成:

<Button bsStyle={condition ? 'success' : ''}  />

这意味着您正在使用空字符串传递 Prop bsStyle。

因此，为了有条件地传递 props 本身，您可以利用展开运算符并评估表达式。这有助于我们在有条件的情况下传递多个 Prop :

<Button {...condition ? {bsStyle: 'success', bsSize:"large"} : {}} />

而不是:

<Button bsStyle={condition ? 'success' : ''} bsSize={condition ? 'large' : ''} />