generieren Schlagwörter vorhandener Komponenten funktionieren nicht ReactJS

Question

UPDATE

Die Zahl des Kindes von der Mutter kommt, so kann ich dies nicht nur laden in, das, weil ich eine Menge von Komponenten und Ich möchte nicht alle importieren.

Code wurde in der ursprünglichen Nachricht geändert

ORIGINAL POST

ich viele Komponenten haben. Ich möchte die Tags einiger untergeordneter Komponenten in einer übergeordneten Komponente dynamisch generieren. Ich habe danach gesucht und gesehen, dass das funktionieren sollte. Aber aus irgendeinem Grund nicht funktioniert ..

codepen: https://codepen.io/anon/pen/qXPReP?editors=0010

class Child1 extends React.Component{ 
    render() { 
    return (
     <div>I'm Child1</div> 
    ) 
    } 
}; 

class Child2 extends React.Component{ 
    render() { 
    return (
     <div>I'm Child2</div> 
    ) 
    } 
}; 

class Child3 extends React.Component{ 
    render() { 
    return (
     <div>I'm Child3</div> 
    ) 
    } 
}; 

class Parent extends React.Component{ 
    render() { 
    var LinkedTag = "Child" + this.props.childIdThatHasToBeRendered; 
    return (
     <div> 
     <div>i'm the parent</div> 
     <LinkedTag /> 
     </div> 
    ) 
    } 
}; 

class Main extends React.Component{ 
    render() { 
    return (
     <Parent childIdThatHasToBeRendered={3} /> 
    ) 
    } 
}; 

ReactDOM.render(<Main />, document.body); 

ist dies sogar möglich, es so zu tun?

Answer 1

Sie benötigen dynamisch eine Komponente zum Rendern auswählen ... Sie brauchen nur ein Host-Objekt aus

zB TagRenderers.js zu holen:

import Child1 from './child1' 
import Child2 from './child2' 

export default { 
    Child1, 
    Child2 
} 

... später

import TagRenderers from '../TagRenderers' 

... 
render(){ 
    const TagRenderer = TagRenderers[`Child${this.state.number}`] 
    return <div> 
    <TagRenderer /> 
    </div> 
} 

https://codepen.io/anon/pen/GvMWya?editors=0010

es ist im Grunde eine Eigenschaft Kommissionierung ein Objekt aus - Es unterscheidet sich, wenn Sie die Komponente gerade noch rechtzeitig benötigen - dies setzt voraus, dass sie alle im Speicher verfügbar sind

Answer 2

Entfernen Sie einfach Ihre Angebote

var LinkedTag = Child3; 

Child3 ist ein Objekt, kein String

updated codepen

Answer 3

Sie Kinderkomponente auf Basis Zustand zeigen kann, wie

class Parent extends React.Component{ 
    render() { 
    let component = <Child3/> // Here you can add the code for condition. 
    return (
     <div> 
     <div>i'm the parent</div> 
     {component} 
     </div> 
    ) 
    } 
}; 

Answer 4

Zusätzlich zu @Dimitar Christoff, Wenn Sie Webpack Code-Splitting verwenden, können Sie diese Komponenten dynamisch importieren, sodass Sie sie aus Leistungsgründen nicht alle in Ihrem Bundle enthalten müssen.

Beispiel:

// childComponent is the name of the component you want to import 
 
const Render = require(`./${childComponent}.jsx`); 
 
return (
 
// We add ".default" because its importing using the (require) function. 
 
    <Render.default /> 
 
);