<div> не может отображаться как потомок <p>

Я вижу это. Это не загадка, о чем она жалуется:

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

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

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

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

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

  render() {
    const {value, ...rest} = this.props;
    return <span className="some-other-component">
      <a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
      <ReactTooltip />
    </span>
  }
}

Спасибо.

Ответы

Ответ 1

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

<p>
   <div>...</div>
</p>

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

Если вы хотите избавиться от этого предупреждения, вы можете настроить компонент ReactTooltip или дождаться, когда создатель зафиксирует это предупреждение.

Ответ 2

Если эта ошибка возникает при использовании пользовательского интерфейса материалов <Typography> https://material-ui.com/api/typography/, то вы можете легко изменить <p> на <span>, изменив значение атрибута component Элемент <Typography>:

<Typography component={'span'} variant={'body2'}>

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

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

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

Ответ 3

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

Исправлено: Удалите <Typography>...</Typography> потому что это используется только для обычного текста внутри <p>...</p> или любого другого текстового элемента, такого как заголовки.

Ответ 4

У меня была похожая проблема, и я завернул компонент в "div" вместо "p", и ошибка исчезла.

Ответ 5

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