如何解决使用“children”作为 props 的 ReactMarkDown/Error Do not pass Children as props

Question

我有一个 Next.js 应用程序，正在部署到 vercel，并使用 ReactMarkDown 组件从 Strapi 后端渲染一些内容。

虽然这在本地有效，但部署失败并显示以下日志：

49:54  Error: Do not pass children as props. Instead, nest children between the opening and closing tags.  react/no-children-prop

<ReactMarkdown key={idx} children={content.answer} />

我认为这是罪魁祸首，它对使用“children”作为道具名称不满意，但是...... ReactMarkDown 组件渲染内容的道具是...... 孩子。

我已经尝试过这个，如下所示。

<ReactMarkdown >{content.answer}</ReactMarkdown>
<ReactMarkdown key={idx} children={[content.answer]} />

第一个不会改变任何内容，后者不起作用，内容不再显示。

任何建议都非常感激。

Answer 1

我建议临时修复是在使用该children属性的行之前添加此注释。

{// eslint-disable-next-line
}

使用属性添加此行children。关于禁用注释如何与一起使用的问题已经解决。必须在同一行，因此请注意格式。eslintjsx

例子：

<ReactMarkdown >{content.answer}</ReactMarkdown>
{// eslint-disable-next-line 
}<ReactMarkdown key={idx} children={[content.answer]} />