ReactJS中如何直接修改DOM

IT技术 javascript reactjs
2021-05-01 22:46:15

假设我有两个数组selectedFoobars和unselectedFoobars. 这些是我的数据，它们使用 ReactJS 呈现为彼此相邻的列表。

当用户单击其中一个列表中的元素时，我想从该列表中删除该元素，并将其添加到另一个列表的末尾。这部分使用 React 非常简单。

但是，我希望被点击的元素从它的旧位置扫过屏幕到另一个列表中的新位置。如果用户点击中间的元素，该unselectedFoobars元素应该在页面上动画显示到selectedFoobars列表底部。

我不只是希望移动的元素在第一个列表中淡出并在第二个列表中淡入。不过，这很容易，通过使用为 React提供动画插件的动画钩子。

这是一个 - 据我所知 - 一个需要直接修改 DOM 以获得所需结果的问题的有效示例。

使用 Backbone.js 可以轻松地手动进行 DOM 操作。这在 Backbone-world 中是直接且非常干净的，尽管需要做一些工作。在 AngularJS 中，我会创建一个指令。这将是非常单调的 Angular。但它会完成工作。

处理这种情况以及需要使用 ReactJS 进行直接 DOM 操作的类似情况的最简洁方法是什么？

1个回答

要操作 React 组件的“实际 DOM”，您可以使用getDOMNode().

但是，引用“实际 DOM”不一定是唯一的解决方案。例如foobars，您可以将它们汇集到一个数组中，而不是将它们分成选定/未选定的数组，其中每个项目都指定自己是否被选中。例如：

getInitialState: function(){
  return {
    foobars: [ {text: 'item1', selected: false} ]
},

render: function(){
  return this.state.foobars.map(function(item){
    return <Foobar selected={item.selected}>{ item.text }</Foobar>;
  });
}

然后您的Foobar组件可以设置className基于this.props.selected. 然后，您可以使用动画插件或其他一些 CSS3 过渡技术。

其它你可能感兴趣的问题
上一篇OctoPrint 网页冻结（在运行 Raspbian 的 Raspberry Pi 上设置） 下一篇iBox Nano 可以打印的最大物体尺寸是多少？