ecmascript-next

Unable to use Arrow functions inside react component class [duplicate]

送分小仙女□ 提交于 2019-11-26 08:27:27
问题 This question already has an answer here: How to use arrow functions (public class fields) as class methods? 4 answers I\'ve started a project where i use React JS for the front end an node js in backend. I used webpack for bundling up JS files. i used babel along with other necessary stuff. When ever i use arrow functions inside a react class it gives a syntax error. like Module build failed: SyntaxError: Unexpected token . But i can use Arrow function in node without any issue. this is my

Is it better to define state in constructor or using property initializers?

本秂侑毒 提交于 2019-11-26 06:35:49
问题 According to this babel documentation, the correct way to use ES6+ with React is to initial components like this: class Video extends React.Component { static defaultProps = { autoPlay: false, maxLoops: 10, } static propTypes = { autoPlay: React.PropTypes.bool.isRequired, maxLoops: React.PropTypes.number.isRequired, posterFrameSrc: React.PropTypes.string.isRequired, videoSrc: React.PropTypes.string.isRequired, } state = { loopsRemaining: this.props.maxLoops, } } But some official examples,

One-liner to take some properties from object in ES 6

馋奶兔 提交于 2019-11-25 22:15:56
问题 How one can write a function, which takes only few attributes in most-compact way in ES6? I\'ve came up with solution using destructuring + simplified object literal, but I don\'t like that list of fields is repeated in the code. Is there an even slimmer solution? (v) => { let { id, title } = v; return { id, title }; } 回答1: Here's something slimmer, although it doesn't avoid repeating the list of fields. It uses "parameter destructuring" to avoid the need for the v parameter. ({id, title}) =>

How to use arrow functions (public class fields) as class methods?

南楼画角 提交于 2019-11-25 21:57:09
问题 I\'m new to using ES6 classes with React, previously I\'ve been binding my methods to the current object (show in first example), but does ES6 allow me to permanently bind a class function to a class instance with arrows? (Useful when passing as a callback function.) I get errors when I try to use them as you can with CoffeeScript: class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this?