组件定义缺少显示名称 react/display-name

Posted 2023-03-27

【中文标题】组件定义缺少显示名称 react/display-name

【英文标题】：Component definition is missing display name react/display-name

【发布时间】：2019-03-30 06:46:01

【问题描述】：

如何在其中添加显示名称？

export default () =>
  <Switch>
    <Route path="/login" exact component=LoginApp/>
    <Route path="/faq" exact component=FAQ/>
    <Route component=NotFound />
  </Switch>;

【问题讨论】：

how to set displayName in a functional component [React]的可能重复

我也有这个，这是 lint 错误。

【参考方案1】：

直接导出箭头函数不会给组件一个displayName，但如果你导出一个常规函数，函数名称将被用作displayName。

export default function MyComponent() 
  return (
    <Switch>
      <Route path="/login" exact component=LoginApp/>
      <Route path="/faq" exact component=FAQ/>
      <Route component=NotFound />
    </Switch>
  );

你也可以把函数放在一个变量中，在函数上手动设置displayName，然后导出。

const MyComponent = () => (
  <Switch>
    <Route path="/login" exact component=LoginApp/>
    <Route path="/faq" exact component=FAQ/>
    <Route component=NotFound />
  </Switch>
);

MyComponent.displayName = 'MyComponent';

export default MyComponent;

【讨论】：

好吧，还有一个问题……我为什么要关心displayName？

@CorayThan 主要用于开发者工具为你使用的组件命名。如果组件没有displayName，则将显示为<Unknown />

或者如果你想按类型过滤组件。

我尝试了解决方案，但仍然收到组件定义缺少显示名称错误。这是我得到错误的地方： export default withAuthenticationRequired(DownloadCodeSamplesPage, onRedirecting: () => );在装载微调器上。这是我的组件导出默认函数 LoadingSpinner() return ( );

@Tholle：非常感谢您提供此信息！

【参考方案2】：

tldr：将箭头函数切换到命名函数

显示的 Lint 错误：Component definition is missing display name react/display-name。

要解决，您可以命名您的函数（IOW，不要使用箭头函数）。在此示例中，我使用 react-table 并传递自定义组件以在单元格中呈现。

没有错误：

  Cell: function OrderItems( row ) 
    return (
      <a>
        View Items
      </a>
    );
  ,

错误：

  Cell: ( row ) => (
    <a>
      View Items
    </a>
  )

【参考方案3】：

在不创建命名函数的情况下将displayName 属性添加到匿名组件函数的方法是使用recompose：

import  compose, setDisplayName  from 'recompose';

export default compose(setDisplayName('SomeComponent'))(props => ...);

或者只是：

export default Object.assign(props => ...,  displayName: 'SomeComponent' );

【参考方案4】：

如果你有一个类似的功能组件：

export default function test()
    

return (<div></div>

并在其中创建另一个组件，例如一个文本框，它通过使用 refs 更新功能组件内部的状态，这确保整个页面不会重新呈现，并且只需要给它一个显示名称的那个组件.否则会出现构建错误。

export default function test()
    const stateForFunctionalComponent = useRef("");

    const seperateTextBoxState = React.forwardRef((props,ref) => 
    const [textBoxDocTitle, setTextBoxDocTitle] = useState("");
    
    useEffect(() => 
      ref.current = textBoxDocTitle;
    ,[textBoxDocTitle])
  
    return <input 
      id="somethingUnique" 
      type="text" 
      required="required" 
      placeholder="Enter document name..." 
      onInput=(e) => setTextBoxDocTitle(e.target.value)>
  </input>)

    //Line that matters!!!
    seperateTextBoxState.displayName = "seperateTextBoxState";


    return (<div><seperateTextBoxState ref=stateForFunctionalComponent/></div>)

【参考方案5】：

如果您使用的是 eslint，这可能是因为没有提供 以下代码 yourclassName.displayName="name"