Example of use (button to call the modal window):

var Example = React.createClass({ render: function() { //var modal=... return ( <div className="example"> //{modal} <BootstrapButton onClick={this.openModal} className="btn-default"> Open modal </BootstrapButton> </div> ); }, openModal: function() { // action... } }); var BootstrapButton = React.createClass({ render: function() { return ( <a {...this.props} href="javascript:;" role="button" className={(this.props.className || '') + ' btn'} /> ); } ReactDOM.render(<Example />, document.getElementById('container'));

    2 answers 2

    The meaning of this record is simple: "forward all the props this component to the child component".

    This syntax is called spread operator .
    In JSX, it works by analogy with "new javascript", ecmascript-2015 , where this syntax is introduced for arrays: the iterated collection going after the three-dot is replaced with the sequence of elements of this collection.

    Well, yes, of course in the official documentation there is a section that answers this question.

    • In this question, you are a little mistaken, because this “sugar”, in the example code, is applied to the HTML tag and not the component. But conciliatory to the components, you all correctly said. - Evgeniy Miroshnichenko

    Copies the contents of the current component's this.props object, and inserts them as attributes into the specified tag, using the property name as the attribute name and its value, respectively, as the attribute value.

    Apparently, this is a manifestation of the newfangled trends of the ECMAScript 2015 standard.