React - czym jest displayName?
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?
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
StringdisplayNamejest 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