Ввод пользовательских средств визуализации [Gatsby & Contenful Richtext]

Я уже довольно долгое время возился с попытками набрать мои содержательные пользовательские средства рендеринга richtext gatsby, но, к сожалению, без особого успеха.

Может ли кто-нибудь направить меня на верный путь, как набрать {children} в моем const Bold и const Text без этого теневого "любого" хака?

const Bold = ({ children }: any) => <p className="bold">{children}</p>
const Text = ({ children }: any) => <p className="paragraph">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: (text: ReactNode) => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node: ReactNode, children: ReactNode) => (
      <Text>{children}</Text>
    ),
  },
}

Заранее THX и наилучшие пожелания из Вены


typescript javascript contentful gatsby
person Into Numbers    schedule 22.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Правильным следом будет ({ children }: { children: React.ReactChildren }) =>..., поскольку дочерние элементы являются дочерними элементами React, и он не ожидает никаких других свойств, предоставляемых React. Если вам нужны другие свойства React и настраиваемые свойства из объекта Props, вместо этого вы должны ввести его с React.propsWithChildren<T> типом.

const Bold = ({ children }: { children: React.ReactChildren }) => <p className="bold">{children}</p>
const Text = ({ children }: { children: React.ReactChildren }) => <p className="paragraph">{children}</p>
person Robert Mennell    schedule 22.05.2020
comment
СПАСИБО Роберт за ваш ответ, вы привели меня к окончательному решению. Я отредактировал ваш ответ кодом, который действительно заставил все работать. - person Into Numbers; 25.05.2020
comment
Если мой ответ был правильным, то обязательно примите его как правильный ответ, чтобы люди знали - person Robert Mennell; 25.05.2020