Question

我正在尝试使react-bootstrap可用于popover和overlaytrigger。我有多个按钮，喜欢调用一个函数来获取每个按钮的弹出窗口格式。我收到以下错误

“ React.createElement：类型无效-需要一个字符串”

我一遍又一遍地看一下反应示例，仍然停留在这个错误上 https://react-bootstrap.github.io/components/overlays/#popover-examples

到目前为止，这是我的代码

none

Answer 1

首先this.Overlay()是错误的，因为：

您已经在调用该函数，诸如() => this.Overlay()或Overlay.bind(this)之类的东西才有意义。
this上没有属性Overlay，因为它是在外部定义的。

关于此问题，您的代码看起来不错，只是一个小的错字as-"h3"应该是as="h3"，并将Overlay设为const或可选的function。

示例：

const Overlay = () => {
  const popover = (
    <Popover id="1">
      <Popover.Title as="h3">Title One</Popover.Title>
      <Popover.Content>Test Content</Popover.Content>
    </Popover>
  );
  return popover;
};

class Example extends React.Component {
  render() {
    return (
      <OverlayTrigger trigger="click" placement="top" overlay={Overlay}>
        <Button>Test</Button>
      </OverlayTrigger>
    );
  }
}

您可以在沙箱中检查一下她：https://codesandbox.io/s/infallible-proskuriakova-jgkre

Answer 2

如果Overlay是功能组件，则应使用标记而不是在OverlayTrigger上调用函数。渲染组件时，React将调用该函数。

尝试

overlay={<Overlay/>}

Answer 3

如果您调用const而不是函数，那应该可以工作。我设法避免了该错误，但是当单击按钮时，没有显示弹出窗口。

它放在我的React组件的顶部

<OverlayTrigger
  trigger="click"
  placement="top"
  overlay={PopoverCustomer}>
  <Button variant="secondary">OK</Button>
</OverlayTrigger>

然后我声明这个常量

const PopoverCustomer = () => (
<Popover>
  <Popover.Title>
    Title
  </Popover.Title>
  <Popover.Content>
    Some content here
  </Popover.Content>
</Popover>
);

反应js弹出覆盖不起作用。获取'React.createElement类型无效，预期为字符串

3 个答案: