Javascript ReactJS：React.render 不是函数，React.createElement 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38166125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS: React.render is not a function and React.createElement is not a function
提问by abautista
I found a problem in my code when I was trying to use these two functions in my React version 15.2.0, nonetheless, I found a workaround but I would like to know if there's a better solution.
当我尝试在 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'));
So, whenever I try to run my index.html file nothing is displayed but this first error comes into the console: React.render is not a function. I found that this occurs because this new version of React needs the react-dom, that is,
因此，每当我尝试运行我的 index.html 文件时，什么都不会显示，但控制台会出现第一个错误：React.render is not a 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'));
Now the problem is solved but now comes the second problem when you try to run again the index.html: React.CreateElement is not a function.What I did was to add another variable requiring react, that is,
现在问题解决了，但是当您再次尝试运行 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'));
In few words, to solve the problem of React.render
总之一句话，解决React.render的问题
var React = require('react-dom')
to solve the problem of React.createElement
解决 React.createElement 的问题
var React2 = require('react')
My questions are:
我的问题是：
Why the react-dom created the problem with React.createElement?
Is it because of this new version of React?
Is there a better approach to solve these problems without having to invoke react-dom and react?
为什么 react-dom 会导致 React.createElement 出现问题？
是不是因为这个新版本的 React？
有没有更好的方法来解决这些问题而不必调用 react-dom 和 react？
Any thoughts and comments are appreciated ;)
任何想法和意见表示赞赏;)
回答by William Martins
First of all, since React v0.14, there is this new package called react-dom. It abstracts the "environment" that you will run React, and, in your case, is the browser.
首先，从 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
https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom
So, since you have now two packages: "react" to create your React components and "react-dom" to "integrate" React with the browser, you need to call the correct methods that each one of them provides.
因此，由于您现在有两个包：“ react”来创建您的 React 组件和“ react-dom”来“集成”React 与浏览器，您需要调用每个包提供的正确方法。
Then, answering your questions:
然后，回答你的问题：
Why the react-dom created the problem with React.createElement?
为什么 react-dom 会导致 React.createElement 出现问题？
The package that has React.createElementis reactand notreact-dom.
具有React.createElementisreact和not的包react-dom。
Is it because of this new version of React?
是不是因为这个新版本的 React？
Yes, you are not able to call React.render(from package react) anymore, you need to use ReactDOM.render(from package react-dom).
是的，您不能再调用React.render(from package react)，您需要使用ReactDOM.render(from package react-dom)。
Is there a better approach to solve these problems without having to invoke react-dom and react?
有没有更好的方法来解决这些问题而不必调用 react-dom 和 react？
I don't see it as a "problem", you just need to know that now there is a specific package to manipulate DOM. Also, it is a "good" pattern, because if sometime you want to render your components as an HTML (to render it using a server), you just need to adapt some things and your code will be the same.
我不认为这是一个“问题”，你只需要知道现在有一个特定的包来操作 DOM。此外，它是一种“好”模式，因为如果有时您想将组件呈现为 HTML（使用服务器呈现它），您只需要调整一些东西，您的代码将是相同的。
回答by abautista
I was getting error: "React.createElement is not a function" and for my situation the fix was to change this:
我收到错误：“React.createElement 不是函数”，对于我的情况，修复方法是改变这个：
import * as React from "react";
import * as ReactDOM from "react-dom";
TO THIS:
对此：
import React from "react";
import ReactDOM from "react-dom";
This was in a TypeScript file so i'm not sure it applies to non-TypeScript or not.
这是在一个 TypeScript 文件中，所以我不确定它是否适用于非 TypeScript。
