Gutenberg Block empty after reload of editor

Question

Well, everythings fine with this. editor and frontend works. but when i come back to pages edit screen, the block is empty. i think there is an error with the attributes, but i can't find good documentation on this. can anybody help?

( function( blocks, editor, components, element, api ) {
    var el = element.createElement;
    var source = blocks.source;
    var InspectorControls = editor.InspectorControls;
    var RichText = editor.RichText;

    blocks.registerBlockType( 'efna-blocks/pdflinks', {
        title: 'PDF-Links',
        icon: 'media-default',
        category: 'common',
            attributes: {
                link: {
                    source: 'children',
                    selector: 'div'
                }
        },

        edit: function(props) {
                    var children = [];

                    function setHtml(element) {
                        props.setAttributes({link: element});
                    }

                    children.push(
                        el( 'div', null,
                            el( RichText, {
                                multiline: null,
                                formattingControls: ['link'],
                                onChange: setHtml,
                                tagName: 'div'
                            }, props.attributes.link )
                        )
                    );

                    return [
                        el( 'div', { className : props.className }, children )
                    ];
        },

            save: function( props ) {
                return el( 'div', { className : props.className },
                    el( RichText.Content, { className: 'pdf-link', value: props.attributes.link } )
                );
            }

        }
    );
})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.components,
    window.wp.element,
    window.wp.api
);

resulting div block in frontend:

<div class="wp-block-efna-blocks-pdflinks">
 <a href="http://test.pdf">Das Dokument – technsiche Details</a><br>
 <a href="http://test.pdf">Das Dokument – technsiche Details</a><br>
 <a href="http://test.pdf">Das Dokument – technsiche Details</a><br>
 <br>
</div>

Answer 1

I was able to make your block save and load on refresh by changing the edit to so:

edit: function(props) {
    return [
        el(
            'div',
            { className : props.className },
            el( 'div', null,
                el( RichText, {
                    multiline: null,
                    formattingControls: ['link'],
                    onChange: function (element) {
                        props.setAttributes({link: element});
                    },
                    tagName: 'div',
                    value: props.attributes.link,
                } )
            )
        )
    ];
},

Notably, I removed the children array logic and placed props.attributes.link in RichText's value instead of a third attribute on el()