Question

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

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

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

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

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

使用Backbone.js可以轻松地手动执行DOM操作。这在Backbone-world中是直截了当且相当干净，虽然相当多但是有点工作。在AngularJS中，我创建了一个指令。这将是非常unidiomatic 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组件可以根据className设置this.props.selected。然后，您可以使用animation addon或其他一些CSS3过渡技术。

如何在ReactJS中直接修改DOM

1 个答案: