2016-07-31 1 views
2

Je dois utiliser la fonction shallowCompare dans la fonction shouldComponentUpdate d'un composant de réaction personnalisé. Je reçois l'erreur suivante:Impossible d'importer rea-addons-shallow-compare, Typescript

app.js:95084 Uncaught TypeError: Cannot read property 'shallowCompare' of undefined

J'ai installé réagiront-addons-peu profondes comparer la version 15.3.0 et je l'ai trouvé dans les node_modules. Il ressemble à ceci:

module.exports = require('react/lib/shallowCompare'); 

Et voici les shallowCompare.js référencés.

/** 
* Copyright 2013-present, Facebook, Inc. 
* All rights reserved. 
* 
* This source code is licensed under the BSD-style license found in the 
* LICENSE file in the root directory of this source tree. An additional grant 
* of patent rights can be found in the PATENTS file in the same directory. 
* 
* @providesModule shallowCompare 
*/ 

'use strict'; 

var shallowEqual = require('fbjs/lib/shallowEqual'); 

/** 
* Does a shallow comparison for props and state. 
* See ReactComponentWithPureRenderMixin 
* See also https://facebook.github.io/react/docs/shallow-compare.html 
*/ 
function shallowCompare(instance, nextProps, nextState) { 
    return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState); 
} 

module.exports = shallowCompare; 

J'ai également installé les typings. J'ai cette version:

// Generated by typings 
// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/6a36f6d5b61602b6c4ad932599097135e80abaf4/react/react-addons-shallow-compare.d.ts 
declare namespace __React { 
    namespace __Addons { 
     export function shallowCompare<P, S>(
      component: __React.Component<P, S>, 
      nextProps: P, 
      nextState: S): boolean; 
    } 
} 

declare module "react-addons-shallow-compare" { 
    var shallowCompare: typeof __React.__Addons.shallowCompare; 
    export = shallowCompare; 
} 

Et maintenant j'essaie de l'importer et de l'utiliser dans un de mes fichiers. J'ai essayé toutes les stratégies pour l'importer.

import { __Addons as ReactAddons } from "react"; 

/* ... other stuff ... */ 

ReactAddons.shallowCompare(this, nextProps, nextState); 

Ou

import shallowCompare = require("react-addons-shallow-compare"); 

/* ... other stuff ... */ 

shallowCompare(this, nextProps, nextState); 

Ou

import shallowCompare = __React.__Addons.shallowCompare; 

/* ... other stuff ... */ 

shallowCompare(this, nextProps, nextState); 

Dans le dernier cas, l'erreur que je reçois est pas celui mentionné ci-dessus, mais

Uncaught ReferenceError: __React is not defined

En mention J'utilise Typescript 1.8.10.

Pour ce que ça vaut, je reçois également l'erreur suivante:

Failed to parse SourceMap

Je suis tout à fait coincé là-dessus depuis un certain temps maintenant. De l'aide serait grandement appréciée.

Merci!

+0

avez-vous essayé const shallowCompare = require ('react-addons-shallow-compare'); ? – QoP

+0

@QoP Je reçois une erreur si j'essaie de faire cela: 'error TS2349: Impossible d'invoquer une expression dont le type n'a pas de signature d'appel. 'N'y a-t-il pas un' import' supposé quelque part? –

+0

ouais vous pouvez utiliser l'import -> 'import shallowCompare de 'react-addons-shallow-compare'' – QoP

Répondre

0

import * as shallowCompare from "react-addons-shallow-compare"; fonctionne!

Si quelqu'un veut expliquer pourquoi et voudrait éditer cette réponse, je serais vraiment reconnaissant.