Script de chargement de réagir

Je veux charger le script à partir d'un CDN et puis exécutez une fonction exposée par le script de Réagir:

componentWillMount() {
    console.log('componentWillMount is called');
    const script = document.createElement('script');
    script.src = 'https://foo.azurewebsites.net/foo.js';
    document.body.appendChild(script);
}


componentDidMount() {
    console.log('componentDidMount is called');
    window.foo.render({
        formId: '77fd8848-791a-4f13-9c82-d24f9290edd7',
    }, '#container');
}


render() {
    console.log('render is called');
    return (
        <div id="container"></div>
    );
}

Le script prend parfois du temps à se charger (généralement pour la première fois) et quand componentDidMount() s'appelle "toto" n'est pas disponible et j'obtiens une erreur comme ceci:

TypeError: Cannot read property 'render' undefined

Comment puis-je assurer que componentDidMount() est appelée une fois que le script est chargé avec succès?

Comment êtes-vous chargement des scripts? <script> tags?
oui juste pour cette composante que nous en avons besoin à partir d'un cdn
Mettez votre application et de Réagir balise de script ci-dessous la CAN balise de script, de sorte que le navigateur doit charger le render fonction première.
Regarde comme il est un onload fonctionnalité lors de l'ajout de scripts dans le corps du document, de sorte que vous pourriez avoir certains disent un booléen dans l'état du composant de garder une trace de l'état de charge, et dans le onload régler la fonction de l'état "chargé" boolean à true. Puis dans votre fonction rendu de vérifier l'état de la valeur. Voici une recherche sur google: google.com.au/...*
J'ai déplacé que pour la index.html pour être sur le côté plus sûr.

OriginalL'auteur Abhijeet | 2017-03-17

  1. 13

    Je ne pense pas que c'est une bonne idée de charger les scripts dans componentWillMount() ou componentDidMount(), selon Réagir Composant Spécifications et Cycle de vie.

    Le code ci-dessous peut vous aider.

    function new_script(src) {
  return new Promise(function(resolve, reject){
    var script = document.createElement('script');
    script.src = src;
    script.addEventListener('load', function () {
      resolve();
    });
    script.addEventListener('error', function (e) {
      reject(e);
    });
    document.body.appendChild(script);
  })
};
//Promise Interface can ensure load the script only once.
var my_script = new_script('http://example.com/aaa.js');

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      status: 'start'
    };
  }

  do_load = () => {
    var self = this;
    my_script.then(function() {
      self.setState({'status': 'done'});
    }).catch(function() {
      self.setState({'status': 'error'});
    })
  }

  render() {
    var self = this;
    if (self.state.status === 'start') {
      self.state.status = 'loading';
      setTimeout(function () {
        self.do_load()
      }, 0);
    }

    return (
      <div>{self.state.status}   {self.state.status === 'done' && 'here you can use the script loaded'}</div>
    );
  }
}

    OriginalL'auteur Y.Peng