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

Question

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

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

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

Answer 1

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

<a href="1">
    <a href="2"></a>
</a>

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

<a href="1"></a>
<a href="2"></a>

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

Прислушайтесь к предупреждению Реакта и не вкладывайте <a> теги.

Answer 2

Я также получал это предупреждение для своего Navigaion, я использовал response-bootstrap для рендеринга 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;
}

Answer 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);
    }

Answer 4

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

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

<a href="http://example.com">
  <span>
    <a href="http://example.net">
        ...
    </a>
  </span>
</a>

а также

<a href="http://example.com">
    <a href="http://example.net">
        ...
    </a>
</a>

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

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

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

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

Являются ли вложенные ссылки незаконными в HTML, HTML5 или React.js?

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

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

Последняя часть описывает, какой контент разрешен внутри элемента. -(A) часть этого означает "За исключением элементов".

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

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

Answer 5

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

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