Javascript 如何在ReactJS中直接修改DOM

假设我有两个数组

selectedFoobars

和

unselectedFoobars

。这些是我的数据，使用ReactJS将它们呈现为彼此相邻的列表

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

但是，我希望单击的元素在屏幕上从它的旧位置扫到它在另一个列表中的新位置。如果用户点击<代码>中的元素>未选择的FooBARS >该元素应该在页面上动画化到<代码>的底部：选择的FooBoS< /Cord>List.< /P> 我不希望移动的元素在第一个列表中淡出，在第二个列表中淡入。不过，通过使用为React提供的动画挂钩，这会很容易

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

使用Backbone.js可以轻松地手动执行DOM操作。这是直截了当的，在主干世界中相当干净，尽管这只是一点工作。在AngularJS中，我将创建一个指令。这将是非常不规则的角度。但这会让工作完成

---

在需要使用ReactJS进行直接DOM操作的情况下，处理这种情况和类似情况的最干净的方法是什么？

要操作React组件的“实际DOM”，可以使用获取它的引用

但是，引用“实际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>;
  });
}

getInitialState:function（）{
返回{
foobars:[{text:'item1'，selected:false}]
},
render:function（）{
返回此.state.foobars.map（函数（项）{
返回{item.text}；
});
}

---

然后你的

Foobar

组件可以基于

这个.props.selected

设置

类名。然后你可以利用或其他一些CSS3转换技术。
你需要为此编写自己的组件。这不是内置的React。但据我所知，React组件只处理虚拟DOM。要实现这一点，必须接触实际的DOM。您的虚拟DOM的工作原理与DOM转换相同。首先，您要将元素动画化到适当的位置。然后，您要将该元素转移到它的新父元素。实现无缝将是一项挑战，但我认为任何解决方案都是如此。据我所知，这并不意味着与实际的DOM转换相同。我该如何修改（例如）元素的位置？我不能直接这么做。就像DOM元素一样，你可以使用绝对定位修改它的样式属性，我使用RebobJS来设置位置属性的动画效果非常好。一旦元素静止在它的最终位置上您可以向新的父级进行传输。使用
getDOMNode
似乎是最好的选择。