为什么jsx在此代码中需要三个点？

Question

我使用以下代码找到问题的much upvoted answer：

var condition = true;

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

为什么......需要？如果我省略它，babel抱怨我：

repl: Unexpected token, expected ...

它看起来像扩展语法，但condition是一个布尔值。我无法找到解释发生情况的文档。

Answer 1

如果您查看MDN: Spread operator：

  

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

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

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

会变成(after babel run with react bootstrap example)：

_react2.default.createElement(_reactBootstrap.Button, condition ? { bsStyle: 'success' } : {})

它也可以写成：

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

其中，表示您正在使用空字符串传递道具bsStyle。

因此，为了有条件地传递道具本身，您可以利用传播运算符并评估表达式。这有助于我们在条件下传递多个道具：

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

而不是：

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

Answer 2

您使用布尔来返回对象。扩展运算符...用于传播该对象，因此您可以使用括号使其更具可读性：

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

如果您的变量为true，则等效于此：

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

如果你的变量是假的，那么

或者这个：

<Button { ...{} } />