React 动态增加、删除、移动dom

在react中,都是状态变更(数据变更)来驱动dom变化,所以动态添加dom不像用jquery一样append一个<li>这样了,而是通过装载<li>的数据数组来动态添加dom。


实例

初始化

image.png

内容组件

一个<table> ,遍历了一个<tr>的数组json.

image.png

json

image.png

注意<tr>的key需要用数组对象的id值


事件

添加一个<tr>  增加一个空的数组对象。id值++

image.png

删除一个<tr>   根据下标值删除对象。

image.png

往上交换<tr>  根据下标值交换前后的对象   往下同理

image.png


效果图     不好演示emmm

image.png


当然 这些只是简单的UI交互,还需对动态数据进行交互存储。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容