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

Question

如何为其添加显示名称？

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

Answer 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;

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

Answer 3

将

displayName

属性添加到匿名组件函数而不创建命名函数的方法是使用

recompose

:

import { compose, setDisplayName } from 'recompose';

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

或者只是：

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

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

Answer 5

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

Answer 6

在“箭头函数”对我有用之前编写以下行

> /* eslint-disable react/display-name */
Header: () => <strong>ID</strong>,

看看这里是如何工作的：https://eslint.org/docs/latest/user-guide/configuring/rules

Answer 7

对于使用

forwardRef

的人来说，在没有内部

function

的情况下编写它会导致此错误。

错误：

const YourComponent = React.forwardRef<YourComponentRef, YourComponentProps>((
  props,
  ref
) => { ... }

解决方案：

const YourComponent = React.forwardRef<YourComponentRef, YourComponentProps>(function YourComponentWithRef(
  props,
  ref
) { ... }