React bootstrap - 未捕获的类型错误：无法读取未定义的属性“toUpperCase”答案

【问题标题】：React bootstrap - Uncaught TypeError: Cannot read property 'toUpperCase' of undefinedReact bootstrap - 未捕获的类型错误：无法读取未定义的属性“toUpperCase”
【发布时间】：2015-09-01 10:31:36
【问题描述】：

我的班级如下：

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，它没有用。

怎么了？

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

您需要对 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 得到的错误是一个典型的错误，实际上它不是一个 React 组件。所以基本上你试图渲染包含所有组件的引导程序返回的对象，而不是你想要的实际输入组件。

【讨论】：