如何在ReactJS中直接修改DOM [英] How to modify the DOM directly in ReactJS

问题描述

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

Let's say I have two arrays selectedFoobars and unselectedFoobars. These are my data and they are rendered as lists next to each other using ReactJS.

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

When the user clicks on an element in one of the lists I want to remove the element from that list, and add it to the end of the other list. That part is pretty straight forward using React.

但是，我希望单击的元素从屏幕的旧位置扫过屏幕，移至另一个列表中的新位置.如果用户单击 unselectedFoobars 中间的元素，则该元素应在整个页面上动画，直到 selectedFoobars 列表的底部.

But, I want the clicked element to sweep across the screen from its old position to its new position in the other list. If the user clicks on and element in the middle of the unselectedFoobars that element should animate across the page to the bottom of the selectedFoobars list.

我不只是希望移动的元素在第一个列表中淡出它，而在第二个列表中淡出.不过，通过使用提供了动画插件的动画钩子，这将很容易.用于React.

I don't just want the moved element to fade out it the first list and fade in in the second. That would have been easy though, by using the animation hooks provided the animation addon for React.

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

That is one – as far as I can tell – valid example of a problem where one needs to modify the DOM directly to achieve the desired result.

使用Backbone.js可以轻松地手动进行DOM操作.尽管工作量很大，但在骨干世界中这是直截了当的，也很干净.在AngularJS中，我将创建一个指令.这将是非常独特的Angular.但这可以完成工作.

Using Backbone.js one could easily do the DOM manipulation manually. This is straight forward and pretty clean in Backbone-world albeit quite but a bit of work. In AngularJS I'd create a directive. It would be pretty unidiomatic Angular. But it would get the job done.

使用ReactJS处理这种和类似情况(需要直接DOM操作)的最干净方法是什么?

What is the cleanest way to handle this and similar cases where direct DOM manipulation is needed using ReactJS?

推荐答案

要操作React组件的实际DOM"，您可以使用

To manipulate a React component's "actual DOM" you can grab a reference of it using getDOMNode().

但是，引用实际DOM"并不一定是唯一的解决方案.例如，您不必将 foobars 分成选定/未选定的数组，而可以将它们合并到一个单独的数组中，其中每个项目都将自己指定为选中还是不选中.例如:

However, referencing the "actual DOM" is not necessarily the only solution. For instance, instead of separating your foobars into selected/unselected arrays, you could pool them into a single array where each item specifies itself as being selected or not. For example:

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 .然后，您可以使用动画插件或其他一些CSS3过渡技术.

Then your Foobar component could set the className based on this.props.selected. You could then utilize the animation addon or some other CSS3 transition technique.

这篇关于如何在ReactJS中直接修改DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！