web-dev-qa-db-ja.com

小道具を渡すときに警告を受け取るスタイル付きコンポーネントを使用してreact-router-dom Linkのスタイルを設定する

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はDOM要素のtempLeftPropプロップを認識しません。意図的にDOMにカスタム属性として表示したい場合は、代わりに小文字templeftpropを使用してください。誤って親コンポーネントから渡した場合は、DOM要素から削除してください。

私は常にスタイル付きコンポーネントに小道具を渡します。問題が通常のHTML要素ではなくコンポーネントLinkをスタイリングしていることが問題であるかどうかはわかりません。

[〜＃〜]質問[〜＃〜]

このエラーが発生するのはなぜですか？無視しても安全ですか？

PS：スタイルは意図したとおりに適用されています。

reactjsreact-router-domstyled-components
3
cbdeveloper

リアクションリンクタグで「to」プロップを試す別の方法として、文字列またはオブジェクトの2つの異なる値を使用できます。

  1. 文字列の場合、リンク先の絶対パスを表します。 /users/123（相対パスはサポートされていません）。

  2. オブジェクトの場合、4つのキーを持つことができます。

    • pathname：リンク先のパスを表す文字列。
    • query：文字列化されるkey:valueペアのオブジェクト。
    • hash：URLに挿入するハッシュ。 #a-hash。
    • state：ロケーションに永続化する状態。

上記のコードは次のように表すことができます：

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

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

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={{ pathname: props.link, state: {tempLeftProp: props.toLeft} }}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}
1
murrow