React bootstrap - Uncaught TypeError: невозможно прочитать свойство toUpperCase неопределенного

Мой класс выглядит следующим образом:

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, который бесполезен.

Что не так?


person ericn    schedule 01.09.2015    source источник


Ответы (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, является типичной ошибкой, когда вы пытаетесь отобразить как компонент, что на самом деле не является компонентом реакции. Таким образом, в основном вы пытались отобразить объект, который реагирует на возврат начальной загрузки, содержащий все компоненты, а не фактический компонент ввода, который вы хотели.

person Mike Driver    schedule 01.09.2015