生成標籤不工作在ReactJS

孩子的數量來自父母，所以我不能只加載這，這是因爲我有很多組件和我不想將它們全部導入。

代碼在原崗位已經改變

原帖

我有很多組件。我想動態生成父組件中某些子組件的標籤。我期待這一點，看到這應該工作。但由於某些原因，它不..

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);

是這甚至可能做這樣的嗎？

來源

2017-08-14 JavascriptDeveloper

您需要的條件表明兒童成分動態選取一個組件來渲染... 你只需要一臺主機對象從

如TagRenderers.js挑：

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

export default { 
    Child1, 
    Child2 
}

...後來

import TagRenderers from '../TagRenderers' 

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

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

它基本上選擇屬性關閉對象 - 如果您需要及時需要組件，它將會有所不同 - 這裏假設它們都在內存中可用

來源

2017-08-14 10:58:49

Exacly我需要的。忘了這個托架技巧來動態地從JSON結構中取出東西！ – JavascriptDeveloper

只是刪除您的報價

var LinkedTag = Child3;

Child3是一個對象，而不是字符串

updated codepen

來源

2017-08-14 10:45:49 hairmot

我更新的代碼來解釋我的代碼更好，遺憾的模糊解釋 – JavascriptDeveloper

你有沒有考慮通過子組件到父和其母公司使它作爲{this.props.children}？然後，您可以動態地將模塊作爲var ChildComponent = require（'Child'+ n）; – hairmot

您可以根據喜歡

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> 
    ) 
    } 
};

來源

2017-08-14 10:50:05

我更新了代碼以更好地解釋我的代碼，對於模糊的解釋感到抱歉 – JavascriptDeveloper

除了@Dimitar Christoff之外，如果您使用的是webpack代碼拆分，則可以動態導入這些組件，因此出於性能原因，您不必將它們全部包含在您的包中。

例子：

// 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 /> 
 
);

來源

2017-08-14 11:23:07

生成標籤不工作在ReactJS

回答

相關問題