键入自定义渲染器[Gatsby和连续富文本格式]

Question

我已经花了相当长的时间来尝试输入我的gatsby内容丰富的RTF自定义渲染器，但不幸的是没有成功。

[有人可以带领我走上正确的路，如何在没有这种可疑的“ any” hack的情况下在我的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

由于子代为React子代，因此适当的足迹为({ children }: { children: React.ReactChildren }) =>...，并且它期望没有其他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>