Warum fängt ReactJS keine Rendering-Ausnahmen von untergeordneten Komponenten ab?

Question

Ich habe die folgende Funktion geschrieben ich eine Fehlerseite zu machen, wenn die Top-Level-Container wünschen Begegnungen, einen Fehler zu machen:

function unsafeRender(callback) { 
    try { 
    var renderedComponent = callback(); 
    return renderedComponent; 
    } catch(err) { 
    return (<ErrorPage error={err} />); 
    } 
} 

Die Top-Level-Container haben diese Methode in seiner render() Methode aufgerufen:

render: function() { 
    return unsafeRender(function() { 
    return <Component />; 
    }); 
} 

Wenn die Rendermethode <Component /> einen Fehler auslöst, wird sie nicht von der Funktion unsafeRender abgefangen. Nur wenn ich es direkt auf die Komponente anwende, wird die Methode aufgerufen. Den Quellcode finden Sie unter this fiddle.

Warum ist das der Fall und muss ich wirklich eine solche Methode auf jede untergeordnete Komponente anwenden, damit sie funktioniert, anstatt sie einmal in einem Container auf oberster Ebene verwenden zu können?

Answer 1

Dies wird durch ein bekanntes Problem in React verursacht. Siehe Felix Klings Kommentar unter meiner Frage für den Link zum Thema auf Github.