Pytanie Zwraca wartość null z elementu bezpaństwowego / "komponentu funkcjonalnego"


Mam stanowy element funkcjonalny w React 0.14, który działał w React 0.13, ale teraz zwraca następujący błąd:

Nie render metoda znaleziona w zwróconej instancji składnika: możesz   zapomniałem zdefiniować render, zwrócił wartość null / false z a   składnik bezstanowy lub próbował renderować element, którego typem jest a   funkcja, która nie jest składnikiem odpowiedzi.

To jest mój komponent:

function ToggleDisplay(props) {
    //should render a <noscript> per React's implementation
    if(props.if === false) {
        // return <noscript></noscript>; //do I have to do this manually now?
        return null;
    }

    let style = {};
    if(shouldHide(props)) {
        style.display = 'none';
    }
    return (
        <span style={style} {...props} />
    );
}

Czy muszę ręcznie zwrócić a <noscript> teraz? Czy istnieje inny sposób zwracania wartości null w składniku bezpaństwowym?


18
2017-11-14 04:44


pochodzenie


dlaczego po prostu nie renderujesz na poziomie nadrzędnym? - Dominic Tobias
Jest także npmjs.com/package/react-component-empty - Ilya Kogan
@DominicTobias To chyba powinna być akceptowana odpowiedź. Zapobiegaj renderowaniu komponentu w pierwszej kolejności. - Logic Artist


Odpowiedzi:


Wygląda na to, że nie jest to techniczne ograniczenie w JavaScript. Aby obsługiwać funkcje strzałek i proste funkcje jako "komponenty", React musi wiedzieć, czy możemy wywołać nowe na nich.

Możemy wywoływać nowe we wszystkim, jeśli są to zwykłe funkcje, o ile   zwracają wartość ReactElement. Jednak to nie zadziała   wartości zwracane null / false / string i chcemy je również wspierać. My   również nie może wywoływać nowych funkcji strzałek. Podobnie, NIE możemy zadzwonić   nowy na zajęciach.

Odpowiedni problem z GitHub


13
2017-11-20 16:13





Od React 15.0 możesz wrócić null z bezpaństwowego składnika funkcjonalnego. (Widzieć # 5355). Koniec z koniecznością powrotu <noscript /> 


Zmiana, która to umożliwiła, polega na tym, że React usunął wsparcie dla klas komponentów, które nie dziedziczą React.Component, co oznacza, że ​​mogą niezawodnie rozróżniać składniki React (klasy, które dziedziczą React.Component) i funkcjonalne elementy bezpaństwowe. A więc PR, aby włączyć funkcjonalność, wymagał usunięcia i uproszczenia kod która tworzy instancje składników.


11
2018-05-19 15:37



Błąd msg był naprawdę mylący, rozwiązany dla mnie ... Miał dwie wersje React w użyciu - thevangelist