web-dev-qa-db-ja.com

Reactからの「アクティブ」状態をスタイル付きコンポーネントで使用する

React Routerは、リンク先のページを表示しているときに、activeクラスをNavLinksに追加します。スタイル付きコンポーネントを使用してこのプロパティにアクセスするにはどうすればよいですか。あなたが彼らのページにいるとき、私はメニュー項目に異なるスタイルを付ける必要があります。

const LinkElem = styled(NavLink)`
  font-size: 16px;
  font-weight: 400;

  ${props => console.log(props)};

  &:hover {
    color: ${props => props.theme.colorOrange};
  }
`;

const Menu = props => {
  const { me } = props;
  return (
    <MenuElem>
      <li>
        {me ? (
          <LinkElem to="/account">Account</LinkElem>
        ) : (
          <LinkElem to="/login">Log in / sign up</LinkElem>
        )}
      </li>
    </MenuElem>
  );
};
react-routerstyled-components
7
Evanss

ルーターに依存しないスタイル付きコンポーネントを構築しようとしている場合、&.activeアプローチには特に熱心ではないので、これに対処するために asNavLink を作成しました：

npm install as-nav-link --save

与えられたコンポーネント：

const MyNavAnchor = styled(({
  as: T = 'a',
  active, // destructured so it is not passed to anchor in props
  ...props
}) => <T {...props} />)({
  textDecoration: 'blink',
  color: 'blue',
}, ({ active }) => (active && {
  color: 'red',
}));

次のように使用できます。

 import asNavLink from 'as-nav-link';

 const MyNavLink = asNavLink(config)(MyNavAnchor);

そして、アクティブな小道具をスタイル付きコンポーネントに渡します。

configはオプションであり、isActive関数（ReactRouterのNavLinkによる）とactiveProp文字列（コンポーネントに渡されるプロップ名）を含めることができます。

0
Alasdair McLeay

小道具classNameはNavLinkの子に追加されているため、NavLinkレベルではアクセスできません。 docs はこれについて明確ではありませんでした。したがって、props.className === 'active'を確認してスタイルを追加することはできません。

代わりに、スタイル付きコンポーネントの内部でcssを使用することもできます。

  const LinkElem = styled(NavLink)`
  // example style
  &.active {
    color: ${props => props.theme.orange }
  }
`;
12
Anu

_react-router_ v4以降、NavLinkとスタイル付きコンポーネントのattrs()関数を使用して、依存関係なしにactiveClassNameのアクティブな状態をスタイル設定できます。

_export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`

  &.${activeClassName} {
    background: red;
  }
`;
_

関連ドキュメント：

3
syntagma
const StyledLink = styled(NavLink)`
  color: blue;

  &.active {
    color: red;
  }
`;
1
mpontus

スタイル付きコンポーネント：

import { NavLink } from 'react-router-dom';

export const MyNavLink = styled(NavLink)`
  &.${props => props.activeClassName} {
    color: red;
  }
`;

使用法：

<MyNavLink to="/dashboard" activeClassName="anyClassNameWillWork">Dashboard</MyNavLink>

テスト済み：

react-router-dom 5.1.2
styled-components 5.0.1

0
Khasky

一番簡単な決断だと思います。

const StyledLink = styled(NavLink)`
  color: blue;

  &.${props => props.activeClassName} {
    color: red;
  }
`;
0
Focus RS

styled-componentsでオブジェクト構文を使用している場合、次のソリューションを実装できます：

const activeClassName = 'nav-item-active'

export const StyledLink = styled(NavLink).attrs({
    activeClassName,
})(props => ({
    height: '20px',
    width: '20px',
    backgroundColor: 'green',
    ['&.' + props.activeClassName]: {
        backgroundColor: 'red'
    }
}))
  • 反応ルーターのアクティブなクラスの名前で変数を宣言する
  • NavLinkのスタイルを設定し、属性activeClassNameとして渡します
  • 小道具からactiveClassNameを取得します
  • ActiveClassNameが存在する場合の条件付きスタイルを宣言します

次のStackBlitzプロジェクトでライブの例を確認できます：

https://stackblitz.com/edit/react-hcudxz

0
Angelo Giuseppe