Предлагает ли Gatsby способ сопоставления общих элементов HTML, отображаемых при уценке, для взаимодействия с компонентами?

Question

Я хотел бы иметь возможность использовать компоненты, уже определенные и используемые на моем сайте Gatsby, для элементов, отображаемых с узлов уценки. Используя styled-компоненты, у меня есть несколько компонентов, представляющих элементы HTML:

const PrimaryHeader = styled.h1`…`
const SecondaryHeader = styled.h2`…`
const TextList = styled.ul`…`
etc

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

# Example

Отображается моим PrimaryHeader компонентом, например.

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

Обратите внимание, что Gatsby поддерживает отображение пользовательских компонентов, но это включает в себя пользовательский html, добавленный к уценке. Я хочу, чтобы уценка была общей.

Answer 1

Да, это так, и я добавил раздел в документы Гэтсби, объясняющий, как это воспроизводится здесь:

Отображение из общих элементов HTML

Вы также можете отобразить общий элемент HTML на один из ваших собственных компонентов. Это может быть особенно полезно, если вы используете что-то вроде styled-components, так как это позволяет вам делиться этими примитивами между контентом уценки и остальным сайтом. Это также означает, что автору уценки не нужно использовать какую-либо пользовательскую разметку - просто стандартную уценку. Например, если у вас есть ряд компонентов заголовка:

const PrimaryTitle = styled.h1`…`
const SecondaryTitle styled.h2`…`
const TertiaryTitle styled.h3`…`

Вы можете сопоставить заголовки, определенные в уценке, с этими компонентами:

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { 
    "h1": PrimaryTitle,
    "h2": SecondaryTitle,
    "h3": TertiaryTitle,
   },
}).Compiler;

И заголовки, определенные в уценке, будут отображаться как ваши компоненты, а не как общие элементы HTML:

# This will be rendered as a PrimaryTitle component
## This will be rendered as a SecondaryTitle component
### This will be rendered as a TertiaryTitle component