【eslint】react/no-children-prop

eslint报错

[react/no-children-prop] Do not pass children as props. Instead, nest children between the opening and closing tags.

报错代码：

<ReactMarkdown
  remarkPlugins={[gfm]}
  components={{
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          // 在这里
          children={String(children).replace(/\n$/, '')}
          style={dark}
          language={match[1]}
          PreTag="div"
          {...props}
        />
      ) : (
        <code className={className} {...props}>
          {children}
        </code>
      );
    },
  }}
>
  {helpText}
</ReactMarkdown>

解决

参考：How can I not pass children as props. Instead, nest children between the opening and closing tags on React?

不要把children当作props传递，可以把它取出来用父标签SyntaxHighlighter包裹起来。

 const renderCodeMarkdown = useCallback(({ node, inline, className, children, ...props }) => {
    const match = /language-(\w+)/.exec(className || '');
    return !inline && match ? (
      <SyntaxHighlighter style={dark} language={match[1]} PreTag="div" {...props}>
        // 修改在这里
        {String(children).replace(/\n$/, '')}
      </SyntaxHighlighter>
    ) : (
      <code className={className} {...props}>
        {children}
      </code>
    );
  }, []);