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