Question

我正在使用代码示例关注ProReact Book，并且在多个地方我应该将传播属性传递给组件，并且接收到的错误是：

模块构建失败：SyntaxError：C：/ PROJECTS / ProReact / kanban-＆gt; app / app / EditCard.js：意外的令牌（8:23）在transpile（C：\ PROJECTS \ ProReact \ kanban-app \ node_modules \ babel-＆gt; loader \ index.js：52：13）在Object.module.exports（C：\ PROJECTS \ ProReact \ kanban-＆gt; 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才能工作。

JSX传播属性

1 个答案: