Menu
I was reading the source code of Facebook's fixed-data-table, and i found this
var {left, ...props} = this.props;
What that it means? is this a new semantic? I'm confused o.O
803
this.props is the object which contains the Attributes which we have passed to the parent component.
To pass props, add them to the JSX, just like you would with HTML attributes. To read props, use the function Avatar({ person, size }) destructuring syntax. You can specify a default value like size = 100 , which is used for missing and undefined props.
Following approaches are there to access props inside quotes in React JSX: Approach 1: We can put any JS expression inside curly braces as the entire attribute value. Approach 2: We can use ES6 template literals.
We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties. They are useful when you want the flow of data in your app to be dynamic.
It's a special form of destructuring assignment proposed for ES7 (and eagerly implemented in the jsx tools and Babel). It creates two variables: left, and props.
left has the value of this.props.left.
props is an object with all of the other properties of this.props (excluding left).
If you wrote it without destructuring it'd look like this:
var left = this.props.left;
var props = {};
Object.keys(this.props).forEach(function(key, index){
if (key !== 'left') {
props[key] = this.props[key];
}
}, this);
That's more than a few characters shaved off :-)
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
