web-dev-qa-db-ja.com

開発ツールを使用してスタイル付きコンポーネントを簡単に検査する方法は？

Reactプロジェクトでstyled-componentsを使用しています。コンポーネントがブラウザーでレンダリングされると、ランダムに生成されたクラス名が割り当てられます。次に例を示します。

<div class="sc-KSdffgy oPwefl">

このクラス名は、<div>がどのコンポーネントからのものであるかを識別するのに役立ちません。したがって、これを簡単に行う方法はありますか？

P.s.現在、スタイル設定されたコンポーネントに属性を追加して、開発ツールでそれらを認識できるようにしています。次に例を示します。

const Foo = styled.div.attrs({
   'data-id': 'foo'
})`
    ...
`;
styled-components
9
JoeTidee

そのため、 Babelプラグイン を作成しました。これを使用すると、コンポーネントに付けた名前を含むクラス名が取得されます。

<div class="Sidebar__Button-KSdffgy oPwefl">

さらに、生成されたコンポーネントのdisplayNameも設定します。つまり、React DevToolsには、<div>や<だけでなく実際のコンポーネント名が表示されます。 Styled（Component）>。

Babelプラグインを使用するには、npm install --save-dev babel-plugin-styled-componentsを付けてインストールしてから、Babel構成に追加します（例：.babelrc）

plugins: ["styled-components"]

それでおしまい！ハッピーデバッグ????

create-react-appを使用している場合、Babel構成を変更できないことに注意してください。私は使用しており、イジェクトせずに構成を変更できるようにするために react-app-rewired をお勧めします。また、スタイルコンポーネントのBabelプラグインを自動的に統合する react-app-rewire-styled-components も構築しました！

20
mxstbr

私は同じことをすることを考えていて、attrsの代わりとして以下につまずきました：

const Section = styled.div`
  background-color: #06183d;
  color: white;
  padding: 16px;
  margin-top: 16px;
  ${breakpoint("md")`
    border-radius: 5px;
  `}
`

Section.defaultProps = {
  "data-id": "Section"
}

React.ComponentのdefaultPropsを使用します。 styled.divの呼び出しをよりクリーンに保ち、必要に応じて簡単に削除できるようにします。

結果： enter image description here

1
Adrian Lynch

create-react-appを使用している場合、別のオプションは スタイル付きコンポーネントのbabelマクロ を使用することです

  1. npm install --save babel-plugin-macros
  2. コンポーネント内では、import styled from 'styled-components/macro';の代わりにimport styled from 'styled-components';を使用してください

これで、開発ツールにコンポーネント名が表示されます。

enter image description here

0
ReturnOfTheMac