ReactJS：React.render不是函數，而React.createElement也不是函數

Question

我在我的React版本15.2.0中嘗試使用這兩個函數時，在代碼中發現了一個問題，但是，我找到了解決方法但我想知道是否有更好的解決方案。

//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')); 

所以，每當我嘗試運行我的index.html文件顯示任何內容，但是這第一個錯誤進入控制檯：React.render不是一個函數。我發現，這是因爲這個新版本的需求做出反應的反應-DOM，也就是

//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')); 

現在問題解決，但現在來的第二個問題，當您嘗試再次運行中的index.html：React.CreateElement不是一個函數。我所做的就是再添變數，需要作出反應，也就是

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')); 

在幾句話，解決React.render

var React = require('react-dom') 

的問題解決React.createElement

的問題

var React2 = require('react') 

我的問題是：

1. 爲什麼react-dom使用React.createElement創建問題？

2. 是因爲React的這個新版本嗎？

3. 有沒有更好的方法來解決這些問題而不必調用react-dom並做出反應？

有什麼想法和意見是值得讚賞;）

Answer 1

首先，因爲陣營v0.14，有這個新的包叫做react-dom。它抽象出你將運行React的「環境」，在你的情況下，它是瀏覽器。

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

所以，既然你現在兩個包：「react」創造你的反應的組分和「react-dom」到「整合」與瀏覽器反應，您需要調用正確的方法使每一層他們提供。

然後，回答你的問題：

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

有React.createElement是react和不react-dom包。

Is it because of this new version of React?

是的，你是不是能夠調用React.render（從包裝react）了，你需要使用ReactDOM.render（從包裝react-dom）。

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

我不認爲它是一個「問題」，你只需要知道知道有一個特定的包來操縱DOM。此外，它是一個「好」的模式，因爲如果有時候你想要將你的組件渲染爲HTML（使用服務器渲染它），你只需要適應一些東西，你的代碼將是相同的。

Answer 2

我得到錯誤：「React.createElement是不是一個函數」和我的情況的修復是可以改變： import * as React from "react"; import * as ReactDOM from "react-dom"; 這樣： import React from "react"; import ReactDOM from "react-dom"; 這是一個打字稿文件，所以我不知道它適用於非TypeScript或不適用。