react-markdown для рендеринга сочетания markdown и HTML, получит предупреждение Текстовые узлы пробелов не могут отображаться как дочерние элементы <table>

avatar
wtf512
9 августа 2021 в 06:50
586
0
1

Мне нужно отобразить контент, представляющий собой смесь уценки и обычного HTML. Содержимое запрашивается с сервера, и я не могу решить, есть ли пробелы внутри таблицы. например необработанные данные контента:

# [React](https://reactjs.org/)<br>React is a JavaScript library for building user interfaces.<br><table style=\"border: 1px solid black;\">  <tr> <td> <center>TEST TEST TES</center> </td> </tr> </table>

поскольку react-markdown обычно экранирует HTML, мне нужно использовать rehype-raw для правильного отображения HTML.

Для тела содержимого выше, если я просто использую dangerouslySetInnerHTML для его рендеринга, ошибки не будет, за исключением того, что формат уценки не будет отображаться.

<section dangerouslySetInnerHTML={{ __html: props.content! }}></section>

однако, если я использую react-markdown с rehype-raw, хотя и HTML, и уценка могут отображаться, я получаю предупреждение в инструменте разработки

        <ReactMarkdown rehypePlugins={[rehypeRaw]}>
            {props.content!}
        </ReactMarkdown>

Предупреждение: validateDOMNesting(...): текстовые узлы с пробелами не могут отображаться как ребенок от . Убедитесь, что у вас нет лишних пробелов между тегами в каждой строке исходного кода.

Итак, мои вопросы:

  1. Я знаю, что это за предупреждение, но почему я не получаю это предупреждение при использовании dangerouslySetInnerHTML, но появляется при использовании react-markdown
  2. поскольку я не могу управлять телом содержимого, так как оно находится на стороне сервера, можно ли каким-либо образом предотвратить появление предупреждения в инструменте разработки?
Источник

Ответы (0)