嘗試添加ReactCSSTransitionGroup（TypeScript + React + JSPM）時未定義/ null引用

我是React的新手，一直試圖向測試頁添加一個非常基本的動畫，以檢查是否知道所涉及的過程......不幸的是我不。嘗試添加ReactCSSTransitionGroup（TypeScript + React + JSPM）時未定義/ null引用

我已經從我的想法是正確的分型，從自動生成的分型的提取安裝> index.d.ts文件是：

/// <reference path="globals/react/index.d.ts" /> /// <reference path="globals/react-addons-css-transition-group/index.d.ts" />

我已經設置了JSPM配置文件有正確的條目，因爲在沒有任何動畫的情況下使用React時沒有問題;地圖部分包含以下條目：

"react": "npm:[email protected]\\dist\\react-with-addons"

的index.tsx文件非常簡單，由（請忽略運行的代碼段，由於某種原因，我不能使用反引號插入多下面碼）：

/// <reference path="../typings/index.d.ts" /> 
 
import * as React from 'react'; 
 
import * as ReactDOM from 'react-dom'; 
 

 
let ReactCSSTransitionGroup = React.__Addons.CSSTransitionGroup; 
 

 
ReactDOM.render(<div><ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500}> 
 
<h1 key="helloKey">Hello</h1> 
 
</ReactCSSTransitionGroup></div>, document.getElementById('app'));

使用打字稿編譯器產生用於index.js以下輸出：

System.register(['react', 'react-dom'], function(exports_1, context_1) { 
 
    "use strict"; 
 
    var __moduleName = context_1 && context_1.id; 
 
    var React, ReactDOM; 
 
    var ReactCSSTransitionGroup; 
 
    return { 
 
     setters:[ 
 
      function (React_1) { 
 
       React = React_1; 
 
      }, 
 
      function (ReactDOM_1) { 
 
       ReactDOM = ReactDOM_1; 
 
      }], 
 
     execute: function() { 
 
      ReactCSSTransitionGroup = React.__Addons.CSSTransitionGroup; 
 
      ReactDOM.render(React.createElement("div", null, React.createElement(ReactCSSTransitionGroup, {transitionName: "example", transitionEnterTimeout: 500}, React.createElement("h1", {key: "helloKey"}, "Hello"))), document.getElementById('app')); 
 
     } 
 
    } 
 
});

當試圖加載文件使用以上的JavaScript我收到以下錯誤：

TypeError: Unable to get property 'CSSTransitionGroup' of undefined or null reference at execute (eval code:15:13) Error loading http://localhost:8000/index.js

當我刪除所有的動畫參考文獻，然後一切正常。

我確定我犯了一個非常簡單的錯誤，但我花了數小時試圖找出原因，但沒有成功。請注意，我已經在StackOverflow，Google和Bing上尋找幫助，但奇怪的是我找不到任何類似的東西。

任何幫助將不勝感激，

親切的問候，

約翰

來源

2016-06-08 TypeScript John

無法正常工作。我沒有使用_react-with-addons_，而是使用_browserify_和_tsify_構建一個包，並且我得到了'Uncaught TypeError：無法讀取未定義的屬性'CSSTransitionGroup'。只要執行'import ReactCSSTransitionGroup = require（「react-addons-css-transition-group」）'但是確實有效，但是看起來沒有類型檢查那個導入。 – peterwimsey

謝謝您的回覆。我設法得到這種通過將反應全局和反應 - 插件 - 過渡小組分型工作，所產生的分型文件現在包括以下項目：

/// <reference path="globals/react/index.d.ts" /> 
/// <reference path="globals/react-global/index.d.ts" /> 
/// <reference path="globals/react-addons-transition-group/index.d.ts" /> 
/// <reference path="globals/react-addons-css-transition-group/index.d.ts" />

來源

2016-06-11 12:22:44

As per the documentation，你實際上應該導入react-addons-css-transition-group：

import ReactCSSTransitionGroup = require("react-addons-css-transition-group");

來源

2016-06-09 00:14:28

如今，正確的軟件包，包括爲react-transition-group：

import { CSSTransitionGroup } from 'react-transition-group';

來源

2017-05-18 12:57:05

嘗試添加ReactCSSTransitionGroup（TypeScript + React + JSPM）時未定義/ null引用

回答

相關問題