当我在我的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需要反应,即
//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 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
)。
有没有更好的方法来解决这些问题,而无需调用反应和反应?
我不认为它是一个“问题”,你只需要知道有一个特定的包来操纵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。