Что означает эта нотация при настройке компонента React Bootstrap? - PullRequest
Новая
       27

Что означает эта нотация при настройке компонента React Bootstrap?

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

Я использую react-bootstrap в своем проекте и хочу настроить компонент, официальная документация дает пример того, как это сделать: 

<>
  <style type="text/css">
    {`
    .btn-flat {
      background-color: purple;
      color: white;
    }

    .btn-xxl {
      padding: 1rem 1.5rem;
      font-size: 1.5rem;
    }
    `}
  </style>

  <Button variant="flat" size="xxl">
    flat button
  </Button>
</>

Я не понимаю эту нотацию. Это определено в файле CSS или в файле компонента? Что означает <> и почему здесь <style type="text/css">? Любые указатели на это были бы замечательными. Спасибо.

Ответы [ 2 ]

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

<> - это сокращение для <React.Fragment>, поскольку вы, возможно, знаете, что компонент React требует элемента тега обертывания HTML для содержимого, это иногда приводит к большему HTML тегов, которых можно избежать в обычном HTML, здесь <React.Fragment> используется, чтобы уменьшить добавленный HTML и избежать добавления элемента обертывания HTML, также стиль является одним из способов стилизации React, проверьте это репо , я считаю, что это styled-jsx библиотека.

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

<></> просто позволяет вам обернуть возвращаемое значение без добавления узла DOM (= React.Fragment я думаю, если вы знакомы с этим). Например: 

const App = () => {
  return (
    <>
      <div>A child</div>
      <div>Another child</div>
    </>
  )
}

О стиле здесь, он сделан внутри возврата (он заключен в <></>), но в вашем проекте вы должны разделить его в файле css. Они просто сделали это, чтобы показать вам доступные классы для настройки компонента (вы можете увидеть это, если осмотрите кнопку).

...