ReactJS ungültigen Komponenten

Question

Mit Blick auf den "Choosing the Type at Runtime" section in der ReactJS docs, sieht es wie der folgenden Code funktionieren soll:

class App extends Component { 
    constructor() { 
    super(); 

    this.state = { test: <div>Test</div>}; 
    } 

    render() { 
    const Test = this.state.test; 

    return <Test />; 
    } 
} 

jedoch nichts gemacht wird, und in der Konsole ich folgende Fehlermeldung angezeigt:

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`. 

Ich verstehe nicht, warum das nicht funktioniert; bitte erkläre.

Beachten Sie, dass die obige Testanwendung mit create-react-app erstellt wurde.

Answer 1

Dies erstellt ein Element - eine bestimmte Instanz eines DOM-Knotens, der auf dem Bildschirm gerendert werden soll.

this.state = { test: <div>Test</div>}; 

Dies nimmt das Element und versucht, es alsKomponente zu behandeln - eine Reaktion Funktion oder Klasse, die weiß, wie man sich als ein Element zu machen.

const Test = this.state.test; 
return <Test />; 

Um eine Analogie aus dem traditionellen OO zu verwenden, würde dies zu nehmen eine Klasse Instanz und versucht, analog sei es alsKlasse zu verwenden.

So etwas sollte stattdessen arbeiten:

this.state = { test: <div>Test</div>}; 
// ... 
return this.state.test; 

Weitere Informationen finden Sie "React Components, Elements, and Instances."