ReactJS:React.render 不是函数,React.createElement 不是函数

IT技术 javascript reactjs
2021-05-07 04:23:05

当我尝试在 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 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'));

现在问题解决了,但是当您再次尝试运行 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?

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

3个回答

首先,从 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.createElementisreactnot 的包react-dom

是不是因为这个新版本的 React?

是的,您不能再调用React.render(from package react),您需要使用ReactDOM.render(from package react-dom)。

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

我不认为这是一个“问题”,你只需要知道现在有一个特定的包来操作 DOM。此外,这是一个“好”的模式,因为如果有时您想将组件呈现为 HTML(使用服务器呈现它),您只需要调整一些东西,您的代码将是相同的。

我收到错误消息:“React.createElement 不是函数”,对于我的情况,修复方法是更改​​它:

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

对此:

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

这是在一个 TypeScript 文件中,所以我不确定它是否适用于非 TypeScript。

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