由于引导,React组件不会呈现

时间:2016-11-01 14:18:19

标签: twitter-bootstrap reactjs meteor react-bootstrap

这是我的组件:

import React from 'react';
import {Col, Panel, Input, ButtonInput} from 'react-bootstrap';

const EditItem = ({content}) => (
  <Col xs={12} sm={6} smOffset={3}>
    <Panel>
      <h1> Edit Item </h1>
      <form>
        <Input type="text" placeholder="Name of the place" />
        <Input type="textarea" placeholder="Description" />
        <ButtonInput bsStyle="primary" type="submit" value="Save Item"/>
      </form>
    </Panel>
  </Col>
);

export default EditItem;

我以类似的方式构建了所有组件,它们工作正常。除了Input和ButtonInput导入之外,该组件与其他工作正常的组件非常相似。我将以下输出发送到我的控制台:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `EditItem`.

由于我得到其中的三个,我猜测每个Input或ButtonInput标记都有一个错误。

我也在控制台中收到此消息:

invariant.js:39 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `EditItem`.(…)

我正在逐步完成教程,并且turorial中的代码与我的相同。考虑到其他bootstrap元素正常工作,我的依赖项都安装正确。知道我错过了什么吗?

1 个答案:

答案 0 :(得分:1)

在版本0.30.6中,既没有Input也有ButtonInput个组件。

确保使用与本教程中使用的版本相对应的react-bootstrap版本。

0.30.6是最后一个版本,您将在http://react-bootstrap.github.io/

上找到所有必需的文档