html - 使用 React Markdown 将无效的道具传递给 DOM 元素

Question

我正在使用 React、React Markdown 和 Material-UI 创建一个包含一些帮助文档的相当简单的网页。我收到以下控制台错误：

“警告：React 无法识别columnAlignmentDOM 元素上的 prop。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写columnalignment。如果您不小心从父组件传递了它，请将其从 DOM 中删除元素。”

建造和检查时：

<table class="Component-table-207" columnalignment=","><thead><tr><th>Shortcut</th><th>Action</th></tr></thead><tbody><tr><td>Zoom in/out</td><td>Scroll up/down with mouse</td></tr><tr><td>Down/Up Arrow</td><td>Next/Previous Document</td></tr><tr><td>Right/Left Arrow</td><td>Next/Previous Page of current Document</td></tr><tr><td>Page Up/Page Down</td><td>Jump to first/last document in the PDF queue</td></tr><tr><td>Next/Previous Page of current Document</td><td>Page Up/Page Down</td></tr><tr><td>Click drag</td><td>Pan current document</td></tr><tr><td>Ctrl+R</td><td>Refresh the editor</td></tr><tr><td>Ctrl+Z</td><td>Undo</td></tr><tr><td>Ctrl+Y</td><td>Redo</td></tr></tbody></table>

这是我在 Markdown.tsx 文件中的代码

const renderers = {
  /* eslint-disable-next-line react/prop-types */
  heading: ({ level, ...props }: any) => {
    let variant;
    let paragraph;

    switch (level) {
      case 1:
        variant = 'display1';
        break;
      case 2:
        variant = 'title';
        break;
      case 3:
        variant = 'subheading';
        break;
      case 4:
        variant = 'caption';
        paragraph = true;
        break;
      default:
        variant = 'body';
        break;
    }

    return <Typography {...props} gutterBottom variant={variant} paragraph={paragraph} />;
  },
  table: withStyles(styles)(({ classes, ...props }: any) => (
    <table className={classes.table} {...props} />
  )),
  listItem: withStyles(styles)(({ classes, tight, ordered, ...props }: any) => (
    <li className={classes.listItem}>
      <Typography paragraph component="span" {...props} />
    </li>
  )),
  link: withStyles(styles)(({ classes, ...props }: any) => (
    <a
      className={classes.link}
      {...props}
    >
    </a>
  )),
  paragraph: (props: any) => <Typography {...props} paragraph />,
  image: (props: any) => <img {...props} style={{ maxWidth: '100%' }} />,
};

// tslint:disable-next-line:function-name
export default function Markdown(props: any) {
  return <ReactMarkdown renderers={renderers} {...props} />;
}

这是有问题的降价

**General Shortcuts:**

| Shortcut | Action |
| ------ | ----------- |
| Zoom in/out | Scroll up/down with mouse |
| Down/Up Arrow | Next/Previous Document |
| Right/Left Arrow | Next/Previous Page of current Document |
| Page Up/Page Down | Jump to first/last document in the PDF queue |
| Next/Previous Page of current Document | Page Up/Page Down |
| Click drag | Pan current document |
| Ctrl+R | Refresh the editor |
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |

并像这样在 Help 组件中呈现：

 <div id="sealing" className={classes.section}>
   <Markdown>
     {SealingJobs}
   </Markdown>
 </div>

我试过的都没有解决这个问题。任何和所有的帮助将不胜感激。

标签： htmlreactjsmarkdownmaterial-uigithub-flavored-markdown