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不是function
。我发现发生这种情况是因为新版本的React需要使用react-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和react？

任何想法和意见表示赞赏;）

Answer 1

首先，从React 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组件，“ react- dom”来将React与浏览器“集成”，因此您需要调用它们每个提供的正确方法。

然后，回答您的问题：

为什么react-dom使用React.createElement造成问题？

具有包React.createElement是react与 不是 react-dom。

是因为这个新版本的React吗？

是的，您无法再React.render（从package react）调用，而需要使用ReactDOM.render（从package
react-dom）。

有没有更好的方法来解决这些问题而不必调用react-dom和react？

我不认为这是一个“问题”，您只需要知道现在有一个特定的软件包即可操作DOM。而且，这是一种“良好”的模式，因为如果有时您想将组件呈现为HTML（使用服务器来呈现），则只需进行一些改动，您的代码就会相同。