ReactJS: React.render non è una funzione e React.createElement non è una funzione

Question

Ho trovato un problema nel mio codice quando stavo cercando di utilizzare queste due funzioni nella mia versione di React 15.2.0, tuttavia, ho trovato una soluzione alternativa ma mi piacerebbe sapere se c'è una soluzione migliore.

//app.jsx 
var React = require('react'); 

var ThumbnailList = require('./thumbnail-list'); 

var options = { 
    ThumbNailData: [{ 
    title : 'Download the ISO', 
    number : 32, 
    header : 'Learning React', 
    description: 'The best library for creating fast and dynamic websites.', 
    imageUrl : 'image source' 
    },{ 
    title : 'Download the ISO', 
    number : 64, 
    header : 'Learning Gulp', 
    description: 'Speed your development framework!', 
    imageUrl : 'image source' 
    }], 
}; 

var element = React.createElement(ThumbnailList,options); 
React.render(element, document.querySelector('.container')); 

Così, ogni volta che provo a eseguire il mio file index.html nulla viene visualizzato, ma questo primo errore entra nella console: React.render non è una funzione. Ho trovato che questo si verifica perché questa nuova versione del Reagire esigenze reagire-dom, cioè,

//app.jsx 
var React = require('react-dom'); 

var ThumbnailList = require('./thumbnail-list'); 

var options = { 
    ThumbNailData: [{ 
    title : 'Download the ISO', 
    number : 32, 
    header : 'Learning React', 
    description: 'The best library for creating fast and dynamic websites.', 
    imageUrl : 'image source' 
    },{ 
    title : 'Download the ISO', 
    number : 64, 
    header : 'Learning Gulp', 
    description: 'Speed your development framework!', 
    imageUrl : 'image source' 
    }], 
}; 

var element = React.createElement(ThumbnailList,options); 
React.render(element, document.querySelector('.container')); 

Ora il problema è risolto, ma ora viene il secondo problema quando si tenta di eseguire nuovamente l'index.html: React.CreateElement non è una funzione. Quello che ho fatto è stato quello di aggiungere un'altra variabile richiedendo reagire, cioè,

var React = require('react-dom'); 
var React2 = require('react'); 
var ThumbnailList = require('./thumbnail-list'); 

var options = { 
    ThumbNailData: [{ 
     title : 'Download the ISO', 
     number : 32, 
     header : 'Learning React', 
     description: 'The best library for creating fast and dynamic websites.', 
     imageUrl : 'image-source' 
    },{ 
     title : 'Download the ISO', 
     number : 64, 
     header : 'Learning Gulp', 
     description: 'Speed your development framework!', 
     imageUrl : 'image-source' 
    }], 
}; 

var element = React2.createElement(ThumbnailList,options); 
React.render(element, document.querySelector('.container')); 

In poche parole, per risolvere il problema di React.render

var React = require('react-dom') 

per risolvere il problema di React.createElement

var React2 = require('react') 

Le mie domande sono:

1. Perché il reag-dom ha creato il problema con React.createElement?

2. È a causa di questa nuova versione di React?

3. Esiste un approccio migliore per risolvere questi problemi senza dover invocare la reazione e reagire?

Tutti i pensieri e commenti sono apprezzati;)

Answer 1

Prima di tutto, dal momento che Reagire v0.14, c'è questo nuovo pacchetto chiamato react-dom. Estrae l '"ambiente" in cui eseguirai React e, nel tuo caso, è il browser.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

Quindi, dal momento che hai ora due pacchetti: "react" per creare il tuo Reagire componenti e "react-dom" a "integrare" reagiscono con il browser, è necessario chiamare i metodi corretti che ognuno di loro fornisce.

Poi, rispondendo alle vostre domande:

Why the react-dom created the problem with React.createElement?

Il pacchetto che ha React.createElement è react e nonreact-dom.

Is it because of this new version of React?

Sì, ma non è possibile chiamare React.render (dal pacchetto react) più, è necessario utilizzare ReactDOM.render (dal pacchetto react-dom).

Is there a better approach to solve these problems without having to invoke react-dom and react?

non vedo come un "problema", è solo bisogno di sapere che sapere che c'è un pacchetto specifico per manipolare DOM. Inoltre, è un pattern "buono", perché se a volte vuoi rendere i tuoi componenti come HTML (per renderizzarli usando un server), devi solo adattare alcune cose e il tuo codice sarà lo stesso.

Answer 2

mi stavo errore: "React.createElement non è una funzione" e per la mia situazione la correzione è stata di cambiare questo: import * as React from "react"; import * as ReactDOM from "react-dom"; a questo: import React from "react"; import ReactDOM from "react-dom"; Questo è stato in un file dattiloscritto in modo non sono sicuro si applica a non-TypeScript o no.