How to change the DOM directly in ReactJS

Question

Let's say I have two arrays selectedFoobarsand unselectedFoobars. This is my data, and it appears as lists next to each other using ReactJS.

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

But, I want the item to click on the screen from the old position to its new position in another list. If the user clicks the button and the element in the middle unselectedFoobars, this element should be animated by the page at the bottom of the list selectedFoobars.

I do not just want the moved item to fade out in the first list and disappear in the second. That would be easy, though, using the animation hooks provided by the animation addon for React.

This is one - as far as I can tell - a real example of a problem when you need to change the DOM directly to achieve the desired result.

Using Backbone.js, you can easily manipulate the DOM manually. It's straightforward and pretty clean in the backbone world, but pretty much, but not much work. In AngularJS, I would create a directive. That would be a pretty unidiomatic Angular. But that would do the job.

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

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. - CSS3.