我正在尝试集成React中bootstrapreactstrap的复选框。我遇到一个常见错误,查看了relevant posts,仍然无法弄清楚。如何解决此错误:


  错误元素类型无效:预期为字符串(对于内置
  组件)或类/函数(用于复合组件),但得到:
  未定义。您可能忘记了从文件中导出组件
  它在中定义,或者您可能混淆了默认导入和命名导入。


错误来源

问题应该在这两行中,我不确定这是什么。

import { InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import FormControl from 'react-bootstrap/FormControl';


如果我们删除这些行并复制下面的HTML,则不会出现任何错误。

的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>


Demo

[谢谢!我是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
};

07-24 09:51
查看更多