Ref-lərin Sahibləri Olması Xəbərdarlığı

Siz aşağıdakı xəta mesajlarına görə buradasınız:

React 16.0.0+

Warning:

Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

React-in əvvəlki versiyalarında

Warning:

addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s render method, or you have multiple copies of React loaded.

Bu xəbərdarlıq adətən üç səbəbdən yarana bilər:

• ref-i funksiya komponentinə qoşduqda.
• Komponentin render() funksiyasından kənarda yaranan elementə mətn ref-i qoşduqda.
• Layihədə React-in konfliktdə olan bir neçə versiyası yükləndikdə (məsələn, səhv qurulmuş NPM paketinə görə).

Funksiya Komponentlərinə Ref-lər

Əgər <Foo> funksiya komponentidirsə bu komponentə ref əlavə etmək olmaz:

// Əgər Foo funksiyadırsa, işləməyəcək!
<Foo ref={foo} />

Əgər komponentə ref əlavə etmək lazımdırsa bu komponenti sinfə çevirin və ya komponentlər üçün ümümiyyətlə ref işlətməyin. Çünki bu nadir hallarda lazımdır.

Render Funksiyasından Kənarda Mətn Ref-ləri

Adətən sahibi olmayan komponentə (yəni digər komponentin render funksiyasından əlavə edilməyən) ref əlavə etdikdə xəbədarlıq göstəriləcək. Məsələn, aşağıdakı kod işləməyəcək:

// İşləmir!
ReactDOM.render(<App ref="app" />, el);

Bu komponenti ref-i saxlayan valideyn komponentdən render edin. Alternativ olaraq callback ref-indən istifadə edə bilərsiniz:

let app;
ReactDOM.render(
  <App ref={inst => {
    app = inst;
  }} />,
  el
);

Bu yolu işlətməmişdən öncə ref-lərə ehtiyacı olduğunuzdan əmin olun.

React-in Bir Neçə Kopiyası

Bower asılılıqların duplikasiyalarını silə bilir. NPM isə bunu etmir. Əgər siz ref-lər ilə işləmirsinizsə problem ref-lərdə olmaya bilər. Layihədə React-in bir neçə kopiyasının yükləməsindən problem yarana bilər. Bəzən, 3-cü tərəfin modulunu NPM ilə yüklədikdə, bu modul React-in fərqli kopiyasını yükləyə bilər. Bu səbəbdən problemlər yarana bilər.

Əgər NPM işlədirsinizsə npm ls və ya npm ls react əmrləri ilə nə baş verdiyi haqqda məlumat ala bilərsiniz.