ReactJS:React.render不是函数，而React.createElement不是函数 [英] ReactJS: React.render is not a function and React.createElement is not a function

问题描述

当我尝试在React版本15.2.0中使用这两个函数时，我在代码中发现了一个问题，尽管如此，我找到了一种解决方法，但是我想知道是否有更好的解决方案.

 //app.jsxvar React = require('react');var ThumbnailList = require('./thumbnail-list');var options = {ThumbNailData:[{标题:下载ISO"，数:32，标头:学习React"，description:创建快速，动态网站的最佳库."，imageUrl:图像源"}，{标题:下载ISO"，数:64，标头:学习学习"，描述:加快您的开发框架！"，imageUrl:图像源"}]，};var element = React.createElement(ThumbnailList，options);React.render(element，document.querySelector('.container')); 

因此，每当我尝试运行index.html文件时，都不会显示任何内容，但是控制台中会出现第一个错误: React.render不是函数.我发现发生这种情况是因为新版本的React需要使用react-dom，即

 //app.jsxvar React = require('react-dom');var ThumbnailList = require('./thumbnail-list');var options = {ThumbNailData:[{标题:下载ISO"，数:32，标头:学习React"，description:创建快速，动态网站的最佳库."，imageUrl:图像源"}，{标题:下载ISO"，数:64，标头:学习学习"，描述:加快您的开发框架！"，imageUrl:图像源"}]，};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:[{标题:下载ISO"，数:32，标头:学习React"，description:创建快速，动态网站的最佳库."，imageUrl:'图像源'}，{标题:下载ISO"，数:64，标头:学习学习"，描述:加快您的开发框架！"，imageUrl:'图像源'}]，};var element = React2.createElement(ThumbnailList，options);React.render(element，document.querySelector('.container')); 

用几句话解决React.render问题

  var React = require('react-dom') 

解决React.createElement问题

  var React2 = require('反应') 

我的问题是:

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

2. 是因为这个新版本的React吗?

3. 有没有一种更好的方法可以解决这些问题而不必调用react-dom并做出反应?

任何想法和评论都值得赞赏；)

解决方案

首先，从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并做出反应?

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

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.

//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,

//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,

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

var React = require('react-dom') 

to solve the problem of React.createElement

var React2 = require('react') 

My questions are:

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

2. Is it because of this new version of React?

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

Any thoughts and comments are appreciated ;)

解决方案

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.

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.

Then, answering your questions:

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

The package that has React.createElement is react and not react-dom.

Is it because of this new version of React?

Yes, you are not able to call React.render (from package react) anymore, you need to use ReactDOM.render (from package react-dom).

Is there a better approach to solve these problems without having to invoke react-dom and 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.

这篇关于ReactJS:React.render不是函数，而React.createElement不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！