React bootstrap - Uncaught TypeError:无法读取未定义的属性'toUpperCase'

时间:2015-09-01 10:31:36

标签: reactjs react-bootstrap

我的课程如下:

import React from 'react';
import Input from 'react-bootstrap';
    export default class FormWidget1 extends React.Component {
        render() {    
            if (!this.props.fields) {
                console.log('no fields passed');
            }
            else {
                console.log(this.props.fields.length);
                console.log(this.props.fields);
            }

            var formFieldList = this.props.fields.map(function(field) {
                console.log("iterating");
                return (
                    <Input type="text" placeholder="testing" label="label" />
                );
            });
            return (
                <div>
                    <form action="">
                        {formFieldList}
                    </form>

                </div>
            );
        }
    }

如果我将<Input />替换为<input />,那么就没有错误。

stacktrace只显示我的app.jsx,这是没用的。

有什么问题?

1 个答案:

答案 0 :(得分:2)

您需要对Input jsx组件的导入进行解构。

import {Input} from 'react-bootstrap';

这样做会呈现给var Input = require('react-bootstrap').Input;而你之前所拥有的内容会呈现给var Input = require('react-bootstrap');

在React Bootstrap的文档中确实提到了这一点:

https://react-bootstrap.github.io/getting-started.html#es6

编辑:一个很好的提示是,当您尝试渲染为组件时,您从React获得的错误是一个典型错误,实际上这不是反应组件。所以基本上你试图渲染反应bootstrap返回包含所有组件的对象,而不是你想要的实际输入组件。