next.js 我如何解决使用“children”作为prop的ReactMarkDown w/ Error不要将children作为prop传递

vu8f3i0k  于 2023-06-22  发布在  React
关注(0)|答案(2)|浏览(263)

我有一个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]} />

第一个,不会改变任何东西,后者不起作用,内容不再显示。
任何建议都非常感谢。

ars1skjm

ars1skjm1#

我建议在使用children属性的行之前添加此注解。

{// eslint-disable-next-line
}

使用children属性将其添加到行中。在eslint上已经有了issues closed关于禁用注解如何与jsx一起工作。必须在同一行上,因此请注意格式。

示例:

<ReactMarkdown >{content.answer}</ReactMarkdown>
{// eslint-disable-next-line 
}<ReactMarkdown key={idx} children={[content.answer]} />
这样,您就不必完全禁用eslint
zz2j4svz

zz2j4svz2#

为了建立在@Zavvy上面的答案的基础上,我使用 eslint-disable-next line 修复了我的问题,格式略有不同。
我的初始代码如下(它给出了react/no-children-prop错误):

return (
   <ReactMarkdown 
        className={props.className}  
        children = {props.markdown || defaultMarkdown} />
);

然后我尝试了Zavvy的答案,所以我不必完全禁用eslint:

return (
   <ReactMarkdown 
        className={props.className}
        {// eslint-disable-next-line 
        }children = {props.markdown || defaultMarkdown} /> 
);
  • ->这是(我现在意识到)明显不正确的(因为我把它插入了错误的地方),并给出了一个语法错误 *。

所以我最后修改了它如下所示,这解决了错误并允许构建完成:

return (
   // eslint-disable-next-line 
   <ReactMarkdown className={props.className}  children = {props.markdown || defaultMarkdown} /> 
);

感谢@Zavvy提供简单的解决方案。

相关问题