Wie würden Sie in React dynamisch eine Komponente rendern?

Question

Ich bin offen für alternative Methoden zur Durchführung der gleichen Aufgabe.

würde Ich mag etwas entlang der Linien der folgenden Funktionen ausführen:

Menu Item 1 
Menu Item 2 
Menu Item 3 

Target(Where component is loaded) 

Auf einen Menüpunkt klicken Sie auf, machen die zugehörige Komponente innerhalb des Targets. Gibt es eine Möglichkeit, eine Komponente dynamisch zu laden? I.e.

<{menuItemName} /> 

Meine aktuelle Methode, dies zu tun ist schrecklich, langsam und umständlich (und funktioniert nicht), und beinhaltet

<li onClick=this.setState({menuItem:"MenuItem1"})>Menu Item 1</li> 
<li onClick=this.setState({menuItem:"MenuItem2"})>Menu Item 2</li> 
<li onClick=this.setState({menuItem:"MenuItem3"})>Menu Item 3</li> 

<{this.state.menuItem} /> 

ich es wissen muss eine bessere Methode, dies zu tun, aber Ich habe derzeit nicht das React-Vokabular, um die Lösung zu finden, nach der ich suche. Ich bin mir auch bewusst, dass das Festlegen des Status in der Render-Methode ein großes Nein ist, aber ich habe Mühe, die Alternative zu finden.

Danke für Ihre Hilfe.

Answer 1

Der Aufruf von setState in render ist falsch, aber Sie fügen nur einen Ereignis-Listener hinzu. Zu Ihrem Problem kommt eine jsx-Darstellung, die zu React.createElement (ReactComponent, {}) kompiliert, wobei das erste Argument eine React-Klasse ist (kann auch eine Zeichenfolge für HTML-Elemente sein). Überprüfen Sie die Antwort auf diese Frage React/JSX Dynamic Component Name.

jedoch um Ihr Problem zu lösen können Sie so etwas wie diese

handleEventClick(itemId) { 
    return() => { 
    this.setState({ 
    itemId 
    }); 
    } 
} 

<li onClick={::this.handleEventClick("itemId")}>Item Name</li> 

render() { 
    const { itemId } = this.state; 
    let renderComponent; 
    if (itemId === 'menu1') { 
    renderComponent = <MenuComponent1 />; 
    } else if ....other components 

    return (
    ... 
    <li onClick={::this.handleEventClick("itemId")></li>... 
    {renderComponent} 
); 

} 

Answer 2

tun, wie Sie vorgeschlagen, dass Sie irgendwo das ausgewählte Element zu speichern haben; zum Beispiel im Zustand der Komponente und dann die entsprechende Komponente anzeigen.

const Component1 = (props) => <div>My component 1</div>; 
const Component2 = (props) => <div>My component 2</div>; 
const Component3 = (props) => <div>My component 3</div>; 

// associate the item id with 
// the corresponding component 
const components = { 
    1: <Component1 />, 
    2: <Component2 />, 
    3: <Component3 />, 
} 

class MyApp extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { selectedItem: 1 } 
    } 

    handleItemClick(itemId) { 
    this.setState({ selectedItem: itemId }); 
    } 

    render() { 
    return (
     <div> 
     <li onClick={() => this.handleItemClick(1)}>Item 1</li> 
     <li onClick={() => this.handleItemClick(2)}>Item 2</li> 
     <li onClick={() => this.handleItemClick(3)}>Item 2</li> 
     {components[this.state.selectedItem]} 
     </div> 
    ); 
    } 
} 

Alternativ Sie können speichert das aktuell ausgewählte Element in dem Router mit url React.

Überprüfen Sie https://react-router.now.sh/quick-start aus.