Я это вижу. Не секрет, на что жалуется:

Warning: validateDOMnesting(...): 
cannot appear as a descendant of

. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

Я являюсь автором SomeComponent и SomeOtherComponent. Но последний использует внешнюю зависимость (ReactTooltip from response-tooltip). Вероятно, не обязательно, что это внешняя зависимость, но это позволяет мне попробовать аргумент здесь, что это «какой-то код, который находится вне моего контроля».

Насколько я должен быть обеспокоен этим предупреждением, учитывая, что вложенный компонент работает нормально (по-видимому)? И как мне все равно это изменить (при условии, что я не хочу повторно реализовывать внешнюю зависимость)? Может быть, есть лучший дизайн, о котором я еще не знаю?

Для полноты картины, вот реализация SomeOtherComponent. Он просто отображает this.props.value, а при наведении: всплывающую подсказку с надписью «Некоторое всплывающее сообщение»:

class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return 
      {value}
      
    
  }
}

Спасибо.

Sander Verhagen

Ответов: 13

Ответы (13)

У меня была аналогичная проблема, и я заключил компонент в «div» вместо «p», и ошибка исчезла.

Если эта ошибка возникает при использовании Material UI https://material-ui.com/api/typography/, вы можете легко изменить

на путем изменения значения атрибута component элемента :


Согласно типографской документации:

компонент: компонент, используемый для корневого узла. Либо строка для использования элемента DOM, либо компонента. По умолчанию он сопоставляет вариант с хорошим компонентом заголовка по умолчанию.

Итак, Typography выбирает

в качестве разумного значения по умолчанию, которое вы можете изменить. Может иметь побочные эффекты ... у меня сработало.

Если вы используете ReactTooltip, чтобы предупреждение исчезло, теперь вы можете добавить wrapper prop со значением span, например:


Since the span is an inline element, it should no longer complain.

Я получил это с помощью секции response-boostrap компонента в React. Ни один из моих компонентов не был в тегах p. по умолчанию отображается как

в HTML-дереве после рендеринга и в основном имея собственный компонент React, возвращающий свои jsx-элементы внутри

, он вызывает

...

- плохой HTML. Итак, чтобы исправить эту проблему, если вы используете , вы можете в основном использовать атрибут as следующим образом , и это устранит предупреждение, поскольку оно разрешает дерево, такое как

Предупреждение появляется только потому, что в демонстрационном коде указано:

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    
  );
}

Его можно изменить следующим образом:

function TabPanel(props) {
    const {children, value, index, classes, ...other} = props;

    return (
        
    );
}

Я получил это, используя специальный компонент внутри раздела компонента в React. Ни один из моих компонентов не был в тегах p

Я получил эту ошибку при использовании Chakra UI в React при выполнении встроенного стиля для некоторого текста. Правильный способ сделать встроенный стиль - использовать элемент span, как другие также говорили о других фреймворках стилей. Правильный код:


    Bold text
    normal inline text

Я опоздал с этим. Эта ошибка возникает и у меня, и причина, по которой она возникает, заключалась в том, что я использовал TAB с реагирующим материалом. в этом мы используем что-то подобное, и там мы оборачиваем наши дочерние элементы внутри {children}. Причина, по которой это происходит, заключается в том, что реакция не считается таковой, замените ее работой.

Если вы ищете, где это происходит, в консоли вы можете использовать: document.querySelectorAll ("p * div")

Ваш компонент может отображаться внутри другого компонента (например, ... ). Следовательно, он загрузит ваш компонент в

..

, что недопустимо.

Фикс: Удалите ... , потому что это используется только для обычного текста внутри

...

или любого другого текстового элемента, такого как заголовки.

Я получил это предупреждение, используя компоненты Material UI, затем я тестирую component = "div" как опору для приведенного ниже кода, и все стало правильно:

import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';


  
    Lorem Ipsum
  

На самом деле это предупреждение возникает из-за того, что в пользовательском интерфейсе материала HTML-тег по умолчанию для компонента Grid равен div, а тег по умолчанию Typography HTML-тег равен p tag, так теперь предупреждение,

Warning: validateDOMnesting(...): 
cannot appear as a descendant of


Подробности (и некоторые теории HTML относительно предупреждения) :

не может отображаться как потомок

сообщение отображается из-за того, что разрешенное содержимое тега

соответствует стандартам, установленным дляКонтекст фразировки, который не включает теги

. Подробности смотрите по ссылкам.

Это ограничение браузеров. Вы должны использовать div, article или что-то в этом роде в методе рендеринга приложения, потому что таким образом вы можете поместить в него все, что захотите. Теги абзаца могут содержать только ограниченный набор тегов (в основном теги для форматирования текста. У вас не может быть div внутри абзаца

недействительный HTML. Согласно правилам пропуска тега, перечисленным в спецификации, тег

автоматически закрывается тегом

, что оставляет

тег без соответствия

. Браузер вполне вправе попытаться исправить это, добавив открытый тег

после

:

Вы не можете поместить

внутри

и получить согласованные результаты от различных браузеров. Предоставьте браузерам действительный HTML, и они будут работать лучше.

Вы можете поместить

внутри
, хотя, если вы замените

на

и оформить его соответствующим образом, вы можете получить то, что хотите.


Подробности (и некоторые теории HTML относительно предупреждения) :

не может отображаться как потомок

сообщение отображается из-за того, что разрешенное содержимое тега

соответствует стандартам, установленным дляКонтекст фразировки, который не включает теги

. Подробности смотрите по ссылкам.

На основании предупреждающего сообщения компонент ReactTooltip отображает HTML-код, который может выглядеть следующим образом:

...

Согласно этому документу, тег

может содержать только встроенные элементы. Это означает, что размещение тега
внутри него должно быть неправильным, поскольку тег div является блочным элементом. Неправильное размещение может вызвать сбои, такие как рендеринг дополнительных тегов, что может повлиять на ваш javascript и css.

If you want to get rid of this warning, you might want to customize the ReactTooltip component, or wait for the creator to fix this warning.

2022 WebDevInsider