陣營，Redux的錯誤時的WebPack：語法錯誤：意外的令牌

Question

這是一個奇怪的問題，這裏是代碼：

... 
const PrivateRoute = ({status, component: Component, ...rest}) => (
    <Route {...rest} render={ props => (
     status ? 
     (<Component {...props}/>) : 
     (<Redirect to="/login"/>) 
    )}/> 
) 

function mapStateToProps(state) { 
    return { 
    status: state.user.status 
} 

export default connect(mapStateToProps)(PrivateRoute) 

錯誤時做的WebPack -d -w：

ERROR in ./public/javascripts/src/admin/components/PrivateRoute.jsx 
Module build failed: SyntaxError: Unexpected token (4:53) 

    2 | import { Route, Redirect } from 'react-router-dom' 
    3 | 
> 4 | const PrivateRoute = ({status, component: Component, ...rest}) => (
    |             ^
    5 | <Route {...rest} render={ props => (
    6 |  status ? 
    7 |  (<Component {...props}/>) : 

的代碼只是按照教程here。 但是，代碼打擊也使用Route {... rest}中的'...'。當我刪除第一個'...'時，第二個和第三個不會產生錯誤。爲什麼會發生？

Answer 1

這是實驗語法。您需要在您的babel配置中包含object-rest-spread插件。或者使用包含此插件的預設。例如stage-3

作爲該

When I remove the first '...', the second and third doesn't produce the error. Why does that happen?

<Route {...rest}的由JSX插件納入react預置處理。 Repl。