web-dev-qa-db-ja.com

React開発ツールはコンポーネントを不明として表示します

次の単純なコンポーネントがあります。

import React from 'react'
import '../css.scss'

export default (props) => {
  let activeClass = props.out ? 'is-active' : ''
  return (
    <div className='hamburgerWrapper'>
      <button className={'hamburger hamburger--htla ' + activeClass}>
        <span />
      </button>
    </div>
  )
}

反応開発ツールでそれを探すと、私は見ます：

enter image description here

これは、React component？を拡張する必要があるためですか？これを変数として作成する必要がありますか？

reactjsgoogle-chrome-devtools
27
Sequential

これは、匿名関数をコンポーネントとしてエクスポートするときに発生します。関数（コンポーネント）に名前を付けてエクスポートすると、React Dev Toolsに適切に表示されます。

const MyComponent = (props) => {}
export default MyComponent;
47
Michael Jasper

Michael Jaspersの回答に追加するために、（デフォルトのエクスポートの代わりに）名前付きインポートを使用する場合は、次のようにできます。

const MyComponent = props => <div />
export { MyComponent }

コンポーネントは、React DevToolsに正しい名前で表示されます。

注：式を直接エクスポートした場合：

export const MyComponent = props => <div />

これは、React DevToolsでAnonymousまたはUnknownとして表示されます。

0
Oli

現在、Michaelが言ったように、関数をエクスポートする前に名前を付けずに、devtoolsインスペクターに<Unknown>として表示されるように変更する方法はありません。ただし、このgithubの問題が解決された場合は、将来的に問題が発生する可能性があります。

https://github.com/facebook/react-devtools/issues/1294

0
Stephen