Sunday, 22 January 2017

reactjs - Don't understand Javascript syntax using triple dot notation

I'm in the process of learning Javascript for work. Specifically I am learning a React/Redux web application and having trouble with triple dot notation being used all over the application. I've googled what the triple dot notation could mean and it looks like it is the spread operator. But from what I understood the spread operator can only be used on iterable objects such as arrays. I don't see iterable arguments though. The sample code below is an example of what the application is using. In the example we have 2 react components AppInputand SomeObject. SomeObject calls AppInput in the render method with argument/s which get assigned to props in AppInput. But I don't understand the mechanics of how it is doing it. Could someone please explain what is happening in the code below? Thanks



export default class AppInput extends React.Component {
static propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
onChange: PropTypes.func,
inputRef: PropTypes.func,
type: PropTypes.string,

highlighted: PropTypes.bool
}
.....
constructor(props) {
super(props);
this.state = { value: sanitizeValue(props.value) };
}
.....
}



export class SomeObject extends React.Component {
.....
return (


{...{
value: someVal,
onChange: this.handleChange,

className: 'someOtherObj',
disabled: !pushMode
}}
/>

{deleteMode && deleteMessage}

);
}
}

No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...