React 开发工具将我的组件显示为未知

Posted 2023-03-07

【中文标题】React 开发工具将我的组件显示为未知

【英文标题】：React Dev tools show my Component as Unknown

【发布时间】：2017-09-13 12:19:20

【问题描述】：

我有以下简单的组件：

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>
  )

当我在反应开发工具中寻找它时，我看到：

这是因为我需要扩展 React 组件吗？我是否需要将其创建为变量并这样做？

【参考方案1】：

当您将匿名函数导出为组件时会发生这种情况。如果你命名函数（组件）然后导出它，它将正确显示在 React 开发工具中。

const MyComponent = (props) => 
export default MyComponent;

【讨论】：

谢谢！为简单的“哑”无状态组件不命名它是不好的做法吗？

我的偏好是命名，然后由于这个问题在不同的行中导出。但是，我会犹豫将其称为不好的做法。

同样的事情也会影响 javascript 回溯，例如在 Chrome 开发工具中。匿名函数将被通用标记，这会使回溯难以解释。

作为一个继承了在 react 开发工具中显示为“”的匿名函数的整个应用程序的人，我强烈建议您为自己的理智命名所有组件。见medium.com/@stevemao/…

你也可以使用export default function MyComponent

【参考方案2】：

我意识到原来的问题已经得到了正确的回答，但我只是想指出一个非常相似的问题，如果使用 React.memo() 或类似的函数，你可能会遇到。考虑以下代码：

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

该组件仍将在 devtools 和某些 React 错误消息（例如 prop-types 验证）中显示为 Anonymous。

确保在尝试记忆之前定义组件可以解决此问题，例如：

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

【参考方案3】：

要添加到 Michael Jaspers 的答案，如果您想使用命名导入（而不是默认导出），您可以这样做：

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

组件将以正确的名称显示在 React DevTools 中。

注意：如果您直接导出了表达式：

export const MyComponent = props => <div />

这会在 React DevTools 中显示为 Anonymous 或 Unknown