javascript - 如何在 ReactJS 中直接修改 DOM

Question

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

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

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

我不只是希望移动的元素在第一个列表中淡出并在第二个列表中淡入。这本来很容易，通过使用 animation addon 提供的动画 Hook 用于 React。

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

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

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

Answer 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 组件可以根据 this.props.selected 设置 className。然后您可以使用 animation addon或其他一些 CSS3 过渡技术。