Styling response-router-dom Link с использованием styled-компонентов, получающих предупреждение при передаче реквизита - PullRequest
Новая
       7

Styling response-router-dom Link с использованием styled-компонентов, получающих предупреждение при передаче реквизита

1 голос
/ 25 сентября 2019 
import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

Я получаю сообщение об ошибке:

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

Я постоянно передаю реквизиты своим стилевым компонентам.Я не знаю, если проблема в том, что я стилизую компонент Link вместо обычного HTML-элемента.

ВОПРОС

Почему я получаю этоошибка?Можно ли просто игнорировать это?

PS: стили применяются по назначению.

1 Ответ

1 голос
/ 25 сентября 2019

Внутри React Router Link передает все свои реквизиты элементу <a> DOM.За исключением тех, которые используются Link, например to.Таким образом, стили работают, потому что реквизиты интерпретируются Styled Components, но затем тот же реквизит снова передается во внутреннюю <a>, которая вызывает (безвредное) сообщение об ошибке.

Вы можете попробовать обертку свложенные стили, как это: 

LS.NavFixedItem_LINK = styled.div`
  a {
    display: flex;
    justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
    align-items: center;
  }
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK tempLeftProp={props.toLeft}>
      <Link to={props.link}>
        {props.name}
      </Link>
    </LS.NavFixedItem_LINK>
  );
}
...