открыть таблицу после того, как я нажму кнопку реагировать

Question

Я выполняю программу в реакции, и я хочу показать список разрешений после нажатия кнопки. Сейчас я показываю информацию с помощью window.alert, но хочу показать ее в более красивом списке.

Кнопка, которую я нажимаю:

Что отображается сейчас (печатает все элементы в списке по одному):

Когда я нажимаю на эту кнопку, я хочу, чтобы все элементы списка отображались следующим образом:

Есть ли способ сделать это?

Answer 1

В вашем методе рендеринга вы можете использовать комбинацию реагирующих с начальной загрузкой компонентов Popover и ListGroup.

const popover = (
  <Popover id="popover-permission" title="Permissions">
    <ListGroup>
      <ListGroup.Item>Permission 1</ListGroup.Item>
      <ListGroup.Item>Permission 2</ListGroup.Item>
      <ListGroup.Item>Permission 3</ListGroup.Item>
    </ListGroup>
  </Popover>
);

return <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
  <Button variant="secondary">Show Permissions</Button>
</OverlayTrigger>