我有一个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} />
我想这就是罪魁祸首,它对使用“孩子”作为 prop 名感到不满,但是... ReactMarkDown组件呈现内容的属性是...孩子们
我尝试了this,如下所示。
<ReactMarkdown >{content.answer}</ReactMarkdown>
<ReactMarkdown key={idx} children={[content.answer]} />
第一个,不会改变任何东西,后者不起作用,内容不再显示。
任何建议都非常感谢。
2条答案
按热度按时间ars1skjm1#
我建议在使用
children
属性的行之前添加此注解。使用
children
属性将其添加到行中。在eslint
上已经有了issues closed关于禁用注解如何与jsx
一起工作。必须在同一行上,因此请注意格式。示例:
这样,您就不必完全禁用
eslint
。zz2j4svz2#
为了建立在@Zavvy上面的答案的基础上,我使用 eslint-disable-next line 修复了我的问题,格式略有不同。
我的初始代码如下(它给出了react/no-children-prop错误):
然后我尝试了Zavvy的答案,所以我不必完全禁用eslint:
所以我最后修改了它如下所示,这解决了错误并允许构建完成:
感谢@Zavvy提供简单的解决方案。