0

React.js アプリ ( http://facebook.github.io/react/docs/animation.html )内のリストに入力するためのアニメーションを追加しようとしています。

しかしReactCSSTransitionGroup、そのような例外をスローします:

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

警告とともに：

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). warning.js:36

Warning: Only functions or strings can be mounted as React components.

私のコンポーネントは次のようになります。

var List = React.createClass({
  render: function () {
    var items = this.props.data
        .filter(function (item) {
            return item.stream;
        })
        .map(function (item) {
            return <div key={item.id}>item.name</div>;
        });

      return (
        <div className="list clearfix">
            <ReactCSSTransitionGroup transitionName="example">
                {items}
            </ReactCSSTransitionGroup>
        </div>
     );
  }
});
4

1 に答える 1

8

元の回答は上記のコードが正しいという前提に基づいていたため、フィドルに基づいて修正されたものです。

あなたのフィドルでは、ReactCSSTransitionGroup を適切に参照していません。あなたはそれを として参照しますがReact.ReactCSSTransitionGroup、これはもちろん ですundefined。これが、未定義の値を使用しているため、何かをラップしようとすると、フィドルが文句を言う理由です。フィドルを機能させるには、次のように css トランジション グループを参照する必要があります。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

修正されたフィドル: http://jsfiddle.net/r98d348f/4/

于 2015-01-13T10:08:31.807 に答える