Ссылка не может отображаться как потомок ссылки

Вопрос:

Приложение React.js дает предупреждение

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>. See Element > a > … > a.

Что это значит? Как вы можете это предотвратить? Вложены ли вложенные ссылки в HTML, HTML5 или React.js?

Лучший ответ:

Это значит:

Недопустимый HTML. Браузеры распознают это и превратят это в:

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

Heed React warning и не <a> теги <a>.

Ответ №1

Я также получил это предупреждение для моего Navigaion, я использовал реакцию-бутстрап для рендеринга React Router Link в NavItem.

Предупреждение: validateDOMNesting <a> не может отображаться как потомок <a>. в (созданном Link)

Исправить: добавьте атрибут “componentClass”, чтобы отобразить NavItem как <span> вместо тега <a> (здесь вы можете использовать любое другое имя тега)

Мой код был

<Nav pullRight> <NavItem> <Link to=»/responses»>Responses</Link> </NavItem> </nav>

После исправления

<Nav pullRight> <NavItem componentClass=’span’> <Link to=»/responses»>Responses</Link> </NavItem> </nav>

Это также испортило стиль, чтобы исправить его добавить следующий CSS

.navbar-nav span[role=button] { padding: 15px; display: inline-block; line-height: 20px; } Ответ №2

Что это значит?

Это означает, что:

а также

и подобные конструкции не допускаются. В любом случае, они не имеют смысла.

Как вы можете это предотвратить?

Это не то, что происходит, если кто-то не пишет код, который пытается это сделать.

Вам нужно найти этот код и изменить его.

Вложены ли вложенные ссылки в HTML, HTML5 или React.js?

Они являются незаконными во всех версиях HTML. Первый DTD для HTML был опубликован как часть HTML 2. В нем говорится:

<!ELEMENT A — — %A.content -(A)>

В последней части описывается, какое содержимое разрешено внутри элемента. Часть -(A) означает “За исключением элементов A”.

HTML 5 – это всего лишь обновление 2014 года для HTML. HTML 5.1 вышел в прошлом году. HTML 5.2 находится в разработке.

React.js – это библиотека JavaScript, которая генерирует HTML DOM. Результаты по-прежнему (вроде) HTML.

Ответ №3

Вы можете использовать функцию вместо тега ‘a’:

import React from ‘react’; import PropTypes from ‘prop-types’; import {Link, withRouter} from ‘react-router’; class SomeClass extends React.Component { constructor(props,context) { super(props,context); this.redirect = this.redirect.bind(this); } redirect(target){ this.context.router.push(«/path»); } render() { return ( <div> <p onClick={this.redirect}>Link</p> </div> ); } } SomeClass.contextTypes ={ router: PropTypes.object }; export default SomeClass;

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

class SomeClass extends React.Component { constructor(props,context) { super(props,context); this.redirect = this.redirect.bind(this); } Ответ №4

отрегулируйте маршрутизатор NavLink, это тег <a> под капотом, поэтому, когда вы конвертируете свой навигатор для взаимодействия с маршрутизатором, это происходит очень часто, забыв удалить теги из ваших ссылок. это приводит к вложенным ссылкам.

как исправить: просто удалите тег <a> в <NavLink>. u не нуждался в этом, <NavLink> сделает это за вас.