Неверный реквизит передается элементу DOM с React Markdown - PullRequest
Новая
       6

Неверный реквизит передается элементу DOM с React Markdown

0 голосов
/ 24 сентября 2018

Я использую React, React Markdown и Material-UI для создания довольно простой веб-страницы, которая включает в себя несколько справочных документов.Я получаю следующую консольную ошибку:

"Предупреждение: React не распознает реквизит columnAlignment для элемента DOM. Если вы намеренно хотите, чтобы он отображался в 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>

Ничто из того, что я пробовал, не устранило проблему.Любая помощь будет принята с благодарностью.

...