ReactDOM.render 无法阅读 属性
ReactDOM.render Cannot read property
Index.js:
import React from 'react';
import buttonsInstance from 'components/button-instance';
import {ReactDOM} from 'react-dom';
ReactDOM.render(buttonsInstance, document.getElementById('app'));
和button-instance.js
:
import React from 'react';
import {ButtonToolbar} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
const buttonsInstance = (
<div>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="large">Large button</Button>
<Button bsSize="large">Large button</Button>
</ButtonToolbar>
<ButtonToolbar>
<Button bsStyle="primary">Default button</Button>
<Button>Default button</Button>
</ButtonToolbar>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="small">Small button</Button>
<Button bsSize="small">Small button</Button>
</ButtonToolbar>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
<Button bsSize="xsmall">Extra small button</Button>
</ButtonToolbar>
</div>
);
我正在尝试使用 https://react-bootstrap.github.io/components.html 中的 reactbootstrap
。
然后我得到错误:
Uncaught TypeError: Cannot read property 'render' of undefined
at Object.<anonymous> (index.js:9)
at __webpack_require__ (bootstrap 571b93c…:657)
at fn (bootstrap 571b93c…:85)
at Object.<anonymous> (log-apply-result.js:30)
at __webpack_require__ (bootstrap 571b93c…:657)
at module.exports (bootstrap 571b93c…:706)
at bootstrap 571b93c…:706
我正在使用 webpack
、webpack-dev-server
和 es6
。我的 react
和 react-dom
是最新的。我不知道如何解决这个问题。
像这样导入 ReactDOM
:
import ReactDOM from 'react-dom';
它是默认导入(导入完整包以使用它的不同方法)而不是命名导入,这就是您收到错误的原因:
Cannot read property 'render' of undefined
或者您可以像这样直接从 react-dom
导入 render
方法:
import {render} from 'react-dom';
现在使用render
直接渲染组件:
render(buttonsInstance, document.getElementById('app'));
确保 react
版本和 react-dom
版本兼容。
例如。对于 react
版本 16.9.0
,使用 'react-dom' 版本 16.9.0
如果出现以下错误
Cannot read property xxx of undefined
如果您同时使用 react-script-ts
和 rollup
,请使用 import * as ...
import * as React from "react";
import * as ReactDOM from "react-dom";
Index.js:
import React from 'react';
import buttonsInstance from 'components/button-instance';
import {ReactDOM} from 'react-dom';
ReactDOM.render(buttonsInstance, document.getElementById('app'));
和button-instance.js
:
import React from 'react';
import {ButtonToolbar} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
const buttonsInstance = (
<div>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="large">Large button</Button>
<Button bsSize="large">Large button</Button>
</ButtonToolbar>
<ButtonToolbar>
<Button bsStyle="primary">Default button</Button>
<Button>Default button</Button>
</ButtonToolbar>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="small">Small button</Button>
<Button bsSize="small">Small button</Button>
</ButtonToolbar>
<ButtonToolbar>
<Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
<Button bsSize="xsmall">Extra small button</Button>
</ButtonToolbar>
</div>
);
我正在尝试使用 https://react-bootstrap.github.io/components.html 中的 reactbootstrap
。
然后我得到错误:
Uncaught TypeError: Cannot read property 'render' of undefined
at Object.<anonymous> (index.js:9)
at __webpack_require__ (bootstrap 571b93c…:657)
at fn (bootstrap 571b93c…:85)
at Object.<anonymous> (log-apply-result.js:30)
at __webpack_require__ (bootstrap 571b93c…:657)
at module.exports (bootstrap 571b93c…:706)
at bootstrap 571b93c…:706
我正在使用 webpack
、webpack-dev-server
和 es6
。我的 react
和 react-dom
是最新的。我不知道如何解决这个问题。
像这样导入 ReactDOM
:
import ReactDOM from 'react-dom';
它是默认导入(导入完整包以使用它的不同方法)而不是命名导入,这就是您收到错误的原因:
Cannot read property 'render' of undefined
或者您可以像这样直接从 react-dom
导入 render
方法:
import {render} from 'react-dom';
现在使用render
直接渲染组件:
render(buttonsInstance, document.getElementById('app'));
确保 react
版本和 react-dom
版本兼容。
例如。对于 react
版本 16.9.0
,使用 'react-dom' 版本 16.9.0
如果出现以下错误
Cannot read property xxx of undefined
如果您同时使用 react-script-ts
和 rollup
,请使用 import * as ...
import * as React from "react";
import * as ReactDOM from "react-dom";