REact Warnung, wenn anstelle von importierten Klasse inline jsx Rendering

Question

Im folgenden Code ich eine Warnung erhalten, wenn der default Fall in den select läuft:

import React, { Component, propTypes } from 'react'; 
import Bar from './Bar/Bar'; 
import Baz from './Baz/Baz'; 

export default class Foo extends Component { 
    static propTypes = { 
    mode: PropTypes.string.isRequired, 
    basePath: PropTypes.string.isRequired, 
    }; 

    render() { 
    let Response; 
    switch (this.props.mode) { 
     case 'init': 
     Response = Bar; 
     break; 
     case 'edit': 
     Response = Baz; 
     break; 
     default: 
     Response = <div></div>; 
    } 

    return (
     <div> 
     <Response basePath={this.props.basePath} /> 
     </div> 
    ); 
    } 
} 

Die Warnung:

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Foo`. 

Wie soll ich hier eine leere div erstellen?

Answer 1

ändern, so dass es Response eine Funktion ist:

default: 
    Response =() => <div></div> 

reagieren, um eine Komponente erwartet, kein Element (d.h.e Komponenteninstanz). Hier wird die Antwort eine funktionale zustandslose Komponente sein, und Ihre Warnung sollte weg sein.