Question

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

“警告：React无法识别DOM元素上的columnAlignment道具。如果您有意希望它作为自定义属性出现在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 |

并在“帮助”组件中呈现，如下所示：

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

我没有尝试解决此问题。任何和所有帮助将不胜感激。

使用React Markdown将无效的prop传递给DOM元素

0 个答案: