小编DSt*_*man的帖子

我有一个带有可选道具的组件。我通过将可选属性传递给 Card 组件来定义它们的默认值，但 eslint 一直告诉我propType "text" is not required, but has no corresponding defaultProps declaration.属性也是如此children。without defaultProps下面的代码似乎与本页上的示例一致： https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md。

import { ReactElement } from 'react';

interface CardProps {
  title: string,
  text?: string | (string|ReactElement)[],   // eslint is complaining here
  children?: React.ReactNode                 // and here
}

const Card = ({ title, text = '', children = null }: CardProps) => (
    <div className="container">
      <div className="title">{title}</div>
      <div className="underline" />
      <div className="card">
        <div className="text">
          {text}
          {children}
        </div>
      </div> …

我正在寻找一种解决方案，可以让我根据查询字符串动态呈现降价。目前我在 React + Vite 中像这样渲染 markdown：

import some other stuff...\nimport { useParams } from 'react-router-dom';\nimport { ReactComponent } from '../content/blog1.md';\nconst BlogPost = () => {\n  const params = useParams();\n  return (\n    <Base>\n      <PageTitle title={`title of blog ${params.blogId}`} />\n      <ReactComponent />\n    </Base>\n  );\n};\nexport default BlogPost;\n

我想要的是将其传递blogId到导入路径，例如：

import { ReactComponent } from `../content/blog${params.blogId}.md`\n

这样就可以在每条路径上导入正确的文件/blog/*。我通过延迟加载降价来尝试此操作，例如：

const path = `../content/blog${params.blogId}.md`;\nconst Markdown = React.lazy(() => import(path));\n

但这会引发错误，当我登录时Markdown我看到

{$$typeof: Symbol(react.lazy), _payload: {\xe2\x80\xa6}, _init: …

每当我编写onClick没有onKeyUp示例的事件属性时，eslint 都会引发错误

具有点击处理程序的可见非交互式元素必须至少有一个键盘侦听器

我不知道如何禁用此规则。我该怎么做呢？