Co oznacza "Składniki funkcji bezstanowych nie mogą być podane w wartości referencyjnej"?

Question

mam to:

const ProjectsSummaryLayout = ({projects}) => { 
    return (
     <div className="projects-summary col-md-10"> 
      <h3>Projects</h3> 
      <ul> 
       { projects.map(p => <li key={p.id}>{p.contract.client}</li>) } 
      </ul> 
     </div> 
    ) 
} 

const ProjectsSummary = connect(
    state => ({projects: state.projects}) 
)(ProjectsSummaryLayout) 

i uzyskać:

Warning: bezpaństwowe elementy funkcyjne nie mogą być podane pozycje literatury (patrz ref "wrappedInstance" w ProjectsSummaryLayout utworzony przez connect (ProjectsSummaryLayout)). Próby dostępu do tego ref. Nie powiodą się .

Co próbujesz mi powiedzieć? Czy robię coś złego?

Widzę dyskusję na ten temat here, ale niestety po prostu nie rozumiem wniosku.

Answer 1

W React, refs may not be attached to a stateless component.

Jak rozumiem, React Redux przywiązuje ref do komponentu nadać mu niezależnie od tego, czy to jest bezpaństwowcem. Ostrzeżenie, które widzisz, pochodzi z React, ponieważ wewnętrznie, React Redux 3 dołącza ref do dostarczonego przez ciebie komponentu bezstanowego (ProjectsSummaryLayout).

Nie robisz nic złego i zgodnie z this GitHub comment możesz bezpiecznie zignorować ostrzeżenie.

W React Redux , no jest dołączony do zawiniętego komponentu domyślnie, co oznacza, że ​​w przypadku aktualizacji do React Redux 4, ostrzeżenie powinno zniknąć.

Answer 2

React ma 2 najczęściej używane style komponentów.

• Komponent funkcjonalna
• Klasa Komponent

Więc Kiedy wykorzystując jedną funkcjonalną wtedy byłem napotykają ten błąd.

fragment kodu odpowiadający składnik funkcjonalny

Ale jak tylko zmienił go do klasy składnika wtedy pracował.

fragment kodu odpowiadający klasie Component.

Spróbuj zmienić składnik funkcjonalny do klasy Component. Mam nadzieję, że rozwiąże to twój problem.