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 AppInput
and 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