我正在尝试在React中集成bootstrap
或reactstrap
中的复选框。我遇到一个常见错误,调查了relevant posts,仍然无法解决。如何解决此错误:
错误元素类型无效:预期为字符串(对于内置组件)或类/函数(用于复合组件),但得到:未定义。您可能忘记了从文件中导出组件它在中定义,或者您可能混淆了默认导入和命名导入。
问题应该在这两行中,我不确定是什么。
import { InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import FormControl from 'react-bootstrap/FormControl';
如果我们删除这些行以及下面复制的HTML,则不会出现任何错误。
<div>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Checkbox aria-label="Checkbox for following text input" />
</InputGroup.Prepend>
<FormControl aria-label="Text input with checkbox" />
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio aria-label="Radio button for following text input" />
</InputGroup.Prepend>
<FormControl aria-label="Text input with radio button" />
</InputGroup>
</div>
[谢谢!我是React的新手。]
prepend
是InputGroupAddOn或InputGroupButton的addonType
属性的一个值。它不是InputGroup
导入的属性。 InputGroup.Prepend
未定义,这就是React抱怨的原因。
根据the reactstrap docs,您需要这样做:
InputGroupAddOn.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
className: PropTypes.string
};
InputGroupButton.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
children: PropTypes.node,
groupClassName: PropTypes.string, // only used in shorthand
groupAttributes: PropTypes.object, // only used in shorthand
className: PropTypes.string
};
在声明道具类型时,在组件中为驼峰inputGroupAddOn
。导入时,您并没有骆驼的情况下添加部分,而是要导入InputGroupAddon
。这可能是您遇到的另一个问题。