JSX傳播屬性

Question

我下面一個ProReact預訂，代碼示例，並在多個地方即時通訊應該是通過傳播屬性的組件和錯誤IM接收是：

Module build failed: SyntaxError: C:/PROJECTS/ProReact/kanban->app/app/EditCard.js: Unexpected token (8:23) at transpile (C:\PROJECTS\ProReact\kanban-app\node_modules\babel->loader\index.js:52:13) at Object.module.exports (C:\PROJECTS\ProReact\kanban->app\node_modules\babel-loader\index.js:131:12) @ ./app/App.js 23:16-37

它工作在這裏的構造函數：

class Card extends Component {constructor() { 
super(...arguments); 
this.state = { 
    showDetails: false 
} 
}; 

但不是在這裏：

componentWillMount(){ 
    let card = this.props.cards.find((card)=> card.id ==  this.props.params.card_id); 
    console.log(card) 
    this.setState({...card}) 
} 

或在這裏：

export const throttle = (func, wait) => { 
let context, args, prevArgs, argsChanged, result; 
let previous = 0; 
return function() { 
let now, remaining; 
if(wait){ 
    now = Date.now(); 
    remaining = wait - (now - previous); 
} 
context = this; 
args = arguments; 
argsChanged = JSON.stringify(args) != JSON.stringify(prevArgs); 

prevArgs = {...args};

if (argsChanged || wait && (remaining <= 0 || remaining > wait)) { 
    if(wait){ 
     previous = now; 
    } 
    result = func.apply(context, args); 
    context = args = null; 
} 
return result; 
}; 
}; 

這裏是我的WebPack配置：

var webpack = require('webpack'); 

/* 
* Default webpack configuration for development 
*/ 
var config = { 
devtool: 'eval-source-map', 
entry: __dirname + "/app/App.js", 
output: { 
    path: __dirname + "/public", 
    filename: "bundle.js" 
}, 
module: { 
    loaders: [{ 
    test: /\.jsx?$/, 
    exclude: /node_modules/, 
    loader: 'babel', 
    query: { 
    presets: ['es2015','react'] 
    } 
}] 
}, 
devServer: { 
contentBase: "./public", 
colors: true, 
historyApiFallback: true, 
inline: true 
    }, 
} 

/* 
* If bundling for production, optimize output 
*/ 
    if (process.env.NODE_ENV === 'production') { 
    config.devtool = false; 
    config.plugins = [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({comments: false}), 
    new webpack.DefinePlugin({ 
    'process.env': {NODE_ENV: JSON.stringify('production')} 
    }) 
]; 
}; 

module.exports = config; 

，最後我的package.json：

{ 
"name": "kanban-app", 
"version": "0.1.0", 
"description": "Pro React sample kanban app project", 
"author": "Cássio Zen", 
"license": "MIT", 
"scripts": { 
"start": "webpack-dev-server --progress", 
"build": "NODE_ENV=production webpack -p --progress --colors" 
}, 
"devDependencies": { 
"babel-core": "~6.7.*", 
"babel-loader": "~6.2.*", 
"babel-preset-es2015": "~6.6.*", 
"babel-preset-react": "~6.5.*", 
"webpack": "~1.12.*", 
"webpack-dev-server": "~1.14.*" 
}, 
"dependencies": { 
"babel-polyfill": "^6.13.0", 
"history": "^1.17.0", 
"marked": "^0.3.6", 
"react": "^15.0.0", 
"react-addons-css-transition-group": "^15.3.2", 
"react-addons-update": "^15.3.2", 
"react-dnd": "^2.1.4", 
"react-dnd-html5-backend": "^1.0.0", 
"react-dom": "^15.0.0", 
"react-router": "^1.0.3", 
"whatwg-fetch": "^1.0.0" 
} 
} 

任何意見，將不勝感激。

Answer 1

擴散運算符有點令人困惑，因爲它被認爲是一個不同的功能，具體取決於您使用它的位置;例如在函數參數vs數組vs對象中。對象擴展運算符不是ES2015的一部分，需要additional plugin才能工作。