Dlaczego jsx wymaga trzech punktów w tym kodzie?

Question

znalazłem much upvoted answer na pytanie z następującego kodu:

var condition = true; 

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

... Dlaczego jest wymagane? Gdybym go pominąć, Babel skarży mi się, że:

repl: Unexpected token, expected ... 

Wygląda składni spread, ale condition jest wartością logiczną. Mam problem ze znajdowaniem dokumentów wyjaśniających, co się dzieje.

Answer 1

Jeśli sprawdzeniu MDN: Spread operator:

Rozprzestrzenianie składnia umożliwia wyrażenie zostać rozszerzony w miejscach, gdzie wiele argumentów (dla wywołań funkcji) lub kilka elementów (na literałów tablicowych) lub kilka zmiennych (w przypadku przypisania restrukturyzacji) oczekiwane są: .

Jeśli widzisz, operator spread wewnątrz składni JSX oceny ekspresji, a następnie

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

stanie się coś takiego, (after babel run with react bootstrap example):

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

To może być także napisany jako:

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

Który następnie oznacza, że ​​mijasz podpory bsStyle z pustym ciągiem.

Aby warunkowo przekazać same rekwizyty, można wykorzystać operator rozrzutu i ocenić wyrażenie. To pomaga nam przekazać wiele rekwizytów na warunki:

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

Zamiast:

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

Answer 2

Używasz logiczna do zwrócić obiekt. Operator spread ... wykorzystywany jest do rozprowadzania tego obiektu, więc można uczynić go bardziej czytelnym dla siebie za pomocą nawiasów:

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

co jest równoznaczne z tym, jeśli zmienna jest prawdziwe:

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

lub ten, jeśli zmienna ma wartość false:

<Button { ...{} } />