ReactDOM.render() 未解决
ReactDOM.render() unresolved
import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/dist/react-dom.min';
import {Alert} from 'reactstrap';
class AlertLine extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
onDismiss = () => {
this.setState(
{
visible: false
}
);
};
render() {
return (
<div>
<Alert color="success" isOpen={this.state.visible} toggle={this.onDismiss}>
<strong>Success!</strong> You successfully read this important alert message.
</Alert>
</div>
);
}
}
ReactDOM.render(
<AlertLine/>,
document.getElementById('root')
);
ReactDOM.render() 与 'react-dom' 一起用于开发工作得很好。但是,一旦我尝试导入 minified 'react-dom.min' 而不是 'react-dom',render() 就无法解析并且什么也没有发生。我也无法从 content assist(ctrl + space) 中找到 render() 。
我已经用 npm 安装了 react@15.6.1 和 react-dom@15.6.1,它们在 'npm list' 上。然后我尝试重新安装它们,但没有用。
非模块
Node modules loaded with require / import must populate an exports object with
everything that the module wants to make public.
whosebug.com/a/14914442/6836839
react-dom.min.js
作为简单的js库使用,不能import
/ require
安装
由于您不能要求/导入,您需要将其作为普通js
脚本加载:
<!-- index.html -->
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
使用
// Just call it...
ReactDOM.render(component, document.getElementById('root'))
备注
If you load React from a tag, these top-level APIs are available on the ReactDOM global.
如果你用ES6搭配npm,可以写import:
import ReactDOM from 'react-dom'
如果你用ES5搭配npm,你可以这样写:
var ReactDOM = require('react-dom');
在你的情况下,你必须使用 import ReactDOM from 'react-dom'
因为 import
并不意味着 "file import",它意味着 "ES6 module import".
要缩小您的捆绑文件,请尝试 uglifyjs-webpack-plugin (if you're using webpack
) or minifyify(如果您使用的是 browserify
)
导入名称与您要导出的组件名称不同。
当您在公共 Index.js 文件中导入一个组件时,您正在导入一个组件(从 '. /components/Header';).
Header 应该不同于 export default headerComponent;名字
import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/dist/react-dom.min';
import {Alert} from 'reactstrap';
class AlertLine extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
onDismiss = () => {
this.setState(
{
visible: false
}
);
};
render() {
return (
<div>
<Alert color="success" isOpen={this.state.visible} toggle={this.onDismiss}>
<strong>Success!</strong> You successfully read this important alert message.
</Alert>
</div>
);
}
}
ReactDOM.render(
<AlertLine/>,
document.getElementById('root')
);
ReactDOM.render() 与 'react-dom' 一起用于开发工作得很好。但是,一旦我尝试导入 minified 'react-dom.min' 而不是 'react-dom',render() 就无法解析并且什么也没有发生。我也无法从 content assist(ctrl + space) 中找到 render() 。
我已经用 npm 安装了 react@15.6.1 和 react-dom@15.6.1,它们在 'npm list' 上。然后我尝试重新安装它们,但没有用。
非模块
Node modules loaded with require / import must populate an exports object with everything that the module wants to make public.
whosebug.com/a/14914442/6836839
react-dom.min.js
作为简单的js库使用,不能import
/ require
安装
由于您不能要求/导入,您需要将其作为普通js
脚本加载:
<!-- index.html -->
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
使用
// Just call it...
ReactDOM.render(component, document.getElementById('root'))
备注
If you load React from a tag, these top-level APIs are available on the ReactDOM global.
如果你用ES6搭配npm,可以写import:
import ReactDOM from 'react-dom'
如果你用ES5搭配npm,你可以这样写:
var ReactDOM = require('react-dom');
在你的情况下,你必须使用 import ReactDOM from 'react-dom'
因为 import
并不意味着 "file import",它意味着 "ES6 module import".
要缩小您的捆绑文件,请尝试 uglifyjs-webpack-plugin (if you're using webpack
) or minifyify(如果您使用的是 browserify
)
导入名称与您要导出的组件名称不同。
当您在公共 Index.js 文件中导入一个组件时,您正在导入一个组件(从 '. /components/Header';).
Header 应该不同于 export default headerComponent;名字