Reactjs _reactDom2.default.render不是函数
考虑以下代码 main.js文件是:Reactjs _reactDom2.default.render不是函数,reactjs,Reactjs,考虑以下代码 main.js文件是: import React from 'react'; import ReactDOM from 'react-dom'; import Maincontainner from './maincontainner'; ReactDOM.render( <div> <h1>News</h1> <Maincontainner/> </div>, d
import React from 'react';
import ReactDOM from 'react-dom';
import Maincontainner from './maincontainner';
ReactDOM.render(
<div>
<h1>News</h1>
<Maincontainner/>
</div>,
document.getElementById('content')
);
这里是依赖项
"dependencies": {
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"react" : "^0.14.7",
"react-dom" : "^0.14.7",
"babel-cli": "^6.5.1",
"babel-preset-es2015": "^6.5.0",
"babel-loader": "^6.2.1",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0"
}
更新:webpack.config.json
module.exports={
entry: './js/main.js',
output:{
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
devServer:{
port:3000
}
};
我也有一个1.1的文件
{
"presets": ["es2015", "react"]
}
将react和react dom更新为“^15.2.1”适合我。我希望它能对您有所帮助。您可以更改
MainContainer
组件中的某些内容
import ReactDOM from'react dom'代码>
render
更改为ReactDOM.render
我在一些教程中使用了这种思维方式,似乎效果很好
'use strict';
import React, { Component } from 'react';
import { render } from 'react-dom';
class Pokemon extends Component{
render() {
const { pokemon, id } = this.props;
return (
<div className="pokemon--species">..</div>
);
}
}
render(
<div className="myDiv">Hello Electron!</div>,
document.getElementById('content')
);
“严格使用”;
从“React”导入React,{Component};
从'react dom'导入{render};
类Pokemon扩展组件{
render(){
const{pokemon,id}=this.props;
返回(
..
);
}
}
渲染(
你好,电子!,
document.getElementById('content')
);
希望这能有所帮助……有时候所有的依赖项、传输和配置都会让这些东西变得有点让人不知所措--在我的例子中,我写了{import ReactDOM from'react'}。显然,我应该使用“react dom”最初,我是这样做的
import React from 'react-dom';
import ReactDom from 'react-dom';
很快我意识到我做错了什么,并更新了上述声明如下
import React from 'react';
import ReactDom from 'react-dom';
希望有帮助。我在更新
react
version时解决了这个错误。可能\u reactDom2.default.render不是函数
意味着因为ReactDOM
没有render
函数
"dependencies": {
"react" : "^0.14.7",
"react-dom" : "^0.14.7"
}
致:
就我而言,问题是:
import render from "react-dom";
vs
我必须用第二种方法来做,否则我会犯错误。我想知道原因,因为它们似乎都有效将导入样式更改为
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('root')
);
从“React”导入React;
从“react dom”导入react dom;
ReactDOM.render(
,
document.getElementById('root'))
);
您使用什么react版本?“react”:“^0.14.7”,“react dom”:“^0.14.7”,使用webpack+babel作为传输工具?这里有点晚,但导入您需要的方法是否有帮助?示例:从“react dom”导入{render};我们之所以遇到这个问题,是因为我们错误地从“react”导入了ReactDOM而不是从“react dom”导入ReactDOM代码>好发现。这对我很有帮助。您还可以像这样导入:从“react dom”导入{render};并且不必更改下面的代码。为了透明,不同之处在于从“React”导入React,而不是从“React dom”导入React。在我的例子中,我需要将import-ReactDOM
更改为import-ReactDOM
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
import render from "react-dom";
import { render } from "react-dom";
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('root')
);