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不是一个函数。我发现这是因为这个新版本的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不是一个函数。 我所做的是添加另一个需要React的变量，即

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？

欢迎任何想法和评论 ;)

- abautista

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（来自软件包react），您需要使用ReactDOM.render（来自软件包react-dom）。

是否有更好的方法解决这些问题而无需调用react-dom和react？

我认为这不是一个“问题”，你只需要知道现在有一个特定的程序包来操作DOM。此外，这是一种“好”的模式，因为如果有一天你想将你的组件渲染成HTML（使用服务器渲染），你只需要稍作调整，你的代码就会保持一致。

- William Martins

Answer 2

我遇到了一个错误：“React.createElement不是函数”，针对我的情况，解决方法是更改以下内容：

import * as React from "react";
import * as ReactDOM from "react-dom";

TO THIS:

import React from "react";
import ReactDOM from "react-dom";

这段代码是在TypeScript文件中的，所以我不确定它是否适用于非TypeScript文件。

- user2080225

---

我曾经遇到过类似的错误，并进行了修复。我将原先的import React, { Text, TouchableHighlight } from "react-native";改为了import React from 'react'; import { Text, TouchableHighlight } from "react-native"; - Bob Aleena

Answer 3

import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello World!</h1>, document.getElementID("root"))

- Bharadwaj Swamy

---

欢迎来到 Stack Overflow。仅有代码的答案通常可以通过添加一些解释来改进其工作原理和原因。当回答一个已经有接受答案的四年老问题时，重要的是要指出你的答案解决了问题的哪个新方面。 - Jason Aller