Gutenberg passing block attributes to component in ES6/ESNext

This is a react related issue, so I suggest you take a look at Components and Props.

In this case the edit function passes an argument, which is an object, and we can call props:

registerBlockType("my-plugin/my-block", {
    //...
    edit: props => {
        return <MyComponent {...props} />;
    }
});

This way of spreading would be the same as:

<MyComponent attributes={props.attributes} setAttributes={props.setAttributes} />

with all the properties the props object has.

Then inside your component you may access the properties as you are doing in the question:

class MyComponent extends Component {
    render() {
        const { attributes, setAttributes } = this.props;
        const { title, url, image, content } = attributes;


    //...etc

Note:

After playing around with blocks and filters I came to the conclusion that it is better to leave the root element of both edit and save functions with an html element rather than a component (and then add the components inside it). This is because Gutenberg changes this root element through filters (for example it adds the necessary classes, as the block name, and allows filters to pass attributes to it), and if you are using your own component you would have to do this by yourself.
You can check the columns block to see the differences in the edit and save functions.

registerBlockType("my-plugin/my-block", {
    //...
    edit: props => {
        return (
            <div className={props.className}>
                <MyComponent {...props} />
            </div>
        );
    },
    save: props => {
        return (
            <div>
                <MyComponent {...props} />
            </div>
        );
    },
});