React Dev tools show my Component as Unknown

后端 未结 4 1815
半阙折子戏
半阙折子戏 2021-01-31 16:14

I have the following simple component:

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

export default (props) => {
  let activeClass = props.out ? \'is-ac         


        
相关标签:
4条回答
  • 2021-01-31 16:17

    To add to Michael Jaspers answer, if you want to use a named import (instead of default export), you can do like so:

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

    The component will show in React DevTools with the correct name.

    Note: If you had exported the expression directly:

    export const MyComponent = props => <div />
    

    This would then show as Anonymous or Unknown in React DevTools

    0 讨论(0)
  • 2021-01-31 16:28

    I realise the original question has been correctly answered already, but I just wanted to note a very similar issue you may encounter if using React.memo() or similar function. Consider the following code:

    const MyComponent = React.memo(props => <div>Hello</div>)
    export default MyComponent
    

    The component will still display as Anonymous in devtools and certain React error messages (e.g. prop-types validation).

    Ensuring that the Component is defined before trying to memoise it resolves this issue, e.g:

    const MyComponent = props => <div>Hello</div>
    export default React.memo(MyComponent)
    
    0 讨论(0)
  • 2021-01-31 16:31

    Currently there's no way to change it from showing up as <Unknown> in the devtools inspector without naming the function before exporting it, as Michael said. But if this github issue gets addressed, there may be in the future.

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

    0 讨论(0)
  • 2021-01-31 16:38

    This happens when you export an anonymous function as your component. If you name the function (component) and then export it, it will show up in the React Dev Tools properly.

    const MyComponent = (props) => {}
    export default MyComponent;
    
    0 讨论(0)
提交回复
热议问题