我的课程如下:
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,这是没用的。
有什么问题?
答案 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返回包含所有组件的对象,而不是你想要的实际输入组件。