reactjs - ReactDOM.render 无法读取属性

索引.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';

它是默认导入(导入完整的包以使用不同的方法)未命名导入，这就是您收到错误的原因:



或者你可以像这样直接从 render 导入 o​​jit_code 方法:

import {render} from 'react-dom';

现在使用 react-dom 直接渲染组件:

render(buttonsInstance, document.getElementById('app'));

关于reactjs - ReactDOM.render 无法读取属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44053226/