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不是一个函数。我做的是添加另一个需要反应的变量，即

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')

我的问题是：

为什么react-dom会使用React.createElement创建问题？
是不是因为这个新版本的React？
有没有更好的方法来解决这些问题而无需调用反应并做出反应？

感谢任何想法和评论;）

Answer 1

首先，自React v0.14以来，有一个名为volatile的新包。它抽象了你将运行React的“环境”，在你的情况下，它是浏览器。

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

所以，既然你现在有两个软件包：“react-dom”来创建你的React组件，“react”来“集成”React与浏览器，你需要调用每个软件包的正确方法其中一个提供。

然后，回答你的问题：

为什么react-dom会使用React.createElement创建问题？

react-dom包React.createElement且不 react。

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

是的，您无法再调用react-dom（来自包React.render），您需要使用react（来自包ReactDOM.render）。

有没有更好的方法来解决这些问题而无需调用react-dom并做出反应？

我不认为它是一个“问题”，你只需知道知道有一个特定的包来操纵DOM。此外，它是一个“好”的模式，因为如果有时你想将组件渲染为HTML（使用服务器渲染它），你只需要调整一些东西，你的代码就会一样。

Answer 2

我收到错误：“React.createElement不是一个函数”，对于我的情况，修复方法是改变它：

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

对此：

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

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

Answer 3

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

ReactJS：React.render不是函数，React.createElement不是函数

3 个答案: