Languages

React - czym jest displayName?

0 points
Asked by:
Rubi-Reyna
367

Gdy używam następującego komponentu w moim projekcie:

kod:

import React, { memo } from 'react';

const MemoComponent = memo(() => <span>My Component</span>);

dostaję wiadomośc od eslint:

Component definition is missing display name eslint(react/display-name)

Więc moje pytanie brzmi: Czym jest displayName w Reakcie?

1 answer
0 points
Answered by:
Rubi-Reyna
367

Rozwiązanie:

Po pierwsze dobrą praktyką jest zamienić powyższy kod na:

import React, { memo } from 'react';

const Component = () => <span>My Component</span>;
const MemoComponent = memo(Component);

Dobrze jest najpierw stworzyć komponent, a dopiero później owinąć go w memo() - daje to transpilerowi wskazówkę, jakie displayName jest ustawione dla twojego komponentu (nazwa const Component służy do ustawiania displayName).

O samej wiadomości:

displayName
String displayName jest używany w komunikatach debugowania. Zwykle nie trzeba go jawnie ustawiać, ponieważ wynika to z nazwy funkcji lub klasy, która definiuje komponent. Możesz chcieć ustawić to jawnie, jeśli chcesz wyświetlać inną nazwę do celów debugowania lub podczas tworzenia komponentu wyższego rzędu, zobacz Opakowuj wyświetlaną nazwę dla łatwiejszego debuggowania, aby uzyskać szczegółowe informacje.

z dokumentacji Reakta:

https://pl.reactjs.org/docs/react-component.html#displayname

0 comments Add comment
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join