реагирует js наложение поповера не работает. Получение недопустимого типа React.createElement. Ожидается строка - PullRequest
Новая
       2

реагирует js наложение поповера не работает. Получение недопустимого типа React.createElement. Ожидается строка

0 голосов
/ 14 января 2020

Я пытаюсь получить реакцию - bootstrap, работающую для popover и overlaytrigger. У меня есть несколько кнопок, и мне нравится вызывать функцию, чтобы получить форматирование поповера для каждой кнопки. Я получаю следующую ошибку

"React.createElement: тип недействителен - ожидается строка"

Я смотрю на пример реакции снова и снова, все еще застрял на этой ошибке https://react-bootstrap.github.io/components/overlays/#popover -примеры

вот мой код пока 

render() {
  return (

  <OverlayTrigger trigger="click" placement="top" 
    overlay={this.Overlay()}>
    <Button>Test</Button>
  </OverlayTrigger>
  );
}

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

Ответы [ 3 ]

0 голосов
/ 03 мая 2020

Это должно работать, если вы вызываете const вместо функции. Мне удалось избежать ошибки, но когда кнопка нажата, всплывающее окно не отображается.

это находится в верхней части моего компонента реагирования 

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

, а затем я объявить это const 

const PopoverCustomer = () => (
<Popover>
  <Popover.Title>
    Title
  </Popover.Title>
  <Popover.Content>
    Some content here
  </Popover.Content>
</Popover>
);
0 голосов
/ 05 мая 2020

Прежде всего this.Overlay() неверно, потому что:

  1. Вы уже вызываете функцию, что-то вроде () => this.Overlay() или Overlay.bind(this) будет иметь смысл.
  2. this не имеет свойства Overlay, так как он определен снаружи.

Что касается проблемы, ваш код выглядит нормально, просто небольшая опечатка as-"h3" должна быть as="h3" и сделать Overlay a 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

0 голосов
/ 14 января 2020

Если Overlay является функциональным компонентом, вы должны использовать тег вместо вызова функции на OverlayTrigger. React вызовет функцию при рендеринге компонента.

Попробуйте

overlay={<Overlay/>}

...