React CSS Transition Group на пользовательских компонентах

Question

Я получаю ошибку Invariant Violation: addComponentAsRefTo(...) при попытке добавить ReactCSSTransitionGroup в мою коллекцию компонентов.

Мой родитель функция визуализации выглядит следующим образом:

var notes = this.props.notes.reverse().map(function (v) { 
     return <NoteItem note={v} key={v.id} />; 
    }); 

    return (
     <div className="note-container"> 
     <ReactCSSTransitionGroup transitionName="example" > 
      {notes} 
     </ReactCSSTransitionGroup> 
     </div> 
    ); 

И Note компонент визуализируем функция возвращает:

return (
     <div> 
     <div className={classNames} onClick={this._onClick}> 
      {note.text} 
     </div> 
     { showDetails ? <NoteItemDetails note={note} /> : null } 
     </div> 
    ); 

NoteItemDetails компонент может быть unrelevant там.

Полное сообщение об ошибке:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.

Любые решения, которые могли бы помочь мне с этим вопросом?

Answer 1

Проблема была в том, что я использовал require('react/tools'), в то время как модули использовали require('React'), а React был загружен два раза, прокрутив браузер.

Письмо дело дело!