React drag and drop to add new components

1. Because I am not very familiar with the react framework idea, I am used to solving problems through Js.

2. this drag-and-drop operation adds a new component. js can directly append an element to an element on A Webpage Through Dom operations, but react obviously cannot. For example, add a custom widget or chart dynamically.

3. Solution: Define an array this. State = {chartlist: []}. After you drag a component of a certain type, add a component (?) to the array (?). Update the component and output it through render.

4. This method encountered a problem when you directly add a component to the array

Const newline = <reachartssimplelinechart/>

Const listline = This. state. chartlist. Push (newline );

This. setstate ({

Chartlist: listline

})

This method will cause an error. It will fail only after the first addition is successful, and this and setstate will not be updated.

5. Solution: Use immutability-helper

Const listline = Update (chartlist, {$ push: [newline]});

This. setstate ({

Chartlist: listline

})

In this way, the instance is successfully added.

Principle: immutable data

React drag and drop to add new components