React CSS 自定义组件过渡组

Question

我在尝试将 ReactCSSTransitionGroup 添加到我的组件集合时遇到 Invariant Violation: addComponentAsRefTo(...) 错误。

我的父渲染函数看起来像：

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 组件的渲染函数 returns:

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

NoteItemDetails 组件可能在那里不相关。

完整的错误信息是：

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 被 browserify 加载了两次。

字母大小写很重要！

React CSS 自定义组件过渡组

React CSS Transition Group on Custom Components

components

transition

reactjs