输入自定义渲染器 [ Gatsby 和 Contentful Rich Text ]

Question

我已经尝试输入我的 gatsby contentful richtext 自定义渲染器很长一段时间了，但不幸的是没有取得太大成功。

有人可以指导我如何在我的 const Bold & const Text 中键入 {children} 而不用这个阴暗的 "any" hack 吗？

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>
    ),
  },
}

提前致谢，来自维也纳的问候

Answer 1

正确的足迹应该是 ({ children }: { children: React.ReactChildren }) =>... 因为 children 是 React Children 并且它不需要其他 React 提供的属性。如果您需要 Props object 中的其他 React 属性和自定义属性，您可以使用 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>

输入自定义渲染器 [ Gatsby 和 Contentful Rich Text ]

Typing Custom Renderers [ Gatsby & Contenful Richtext ]

javascript

typescript

contentful

gatsby