键入自定义渲染器 [ Gatsby 和内容丰富的富文本]

Question

很长一段时间以来，我一直在尝试键入我的 gatsby 内容丰富的富文本自定义渲染器，但不幸的是没有取得多大成功。

有人能引导我走上正确的道路吗？如何在我的 const Bold 和 const Text 中键入 {children} 而无需这种阴暗的“任何”黑客攻击？

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 并从维也纳向您致以最诚挚的问候

Answer 1

正确的足迹应该是({ children }: { children: React.ReactChildren }) =>...，因为孩子是 React Children，并且它不期望其他 React 提供的属性。如果您需要来自 Props 对象的其他 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>