在React JS中調用動態組件

我是JS中的新手。我正在調用來自另一個JavaScript類的HTML字符串中的反應組件。但該組件不在屏幕上呈現。在React JS中調用動態組件

class Form extends Component { 
    render() { 
     var markup = '<Sections />'; 
     return (<div className="content" dangerouslySetInnerHTML={{__html: markup}}></div>); 
    } 

} 

class Sections extends Component{ 
    render(){ 
     return (<div className='row'>Row1</div>); 
    } 
}

請幫我我在哪裏錯了。我認爲reactjs不能識別節段組件，因爲它來自字符串。有什麼辦法，我們可以手動編譯jsx。

來源

2016-07-05 user2114575

是的我已經將Section定義爲一個組件。我將JSX動態生成爲字符串，並在render方法中將其返回。 React無法將其解析爲段組件，因此不呈現Section組件 – user2114575

我已經嘗試過，但它不顯示 – user2114575

在HTML字符串中如果我給出「」，那麼它給出Uncaught不變的違規：無效標記。如果我只給「節」，則創建部分組件，但不調用預先定義的組件 – user2114575

記住JSX是不一樣的HTML。當你寫出類似<Sections />的東西時，你實際上正在編寫React.createElement(Sections, null)。

如果您有"<Sections />"作爲字符串，並且您想將它解析爲React.createElement的調用，那麼您需要將其解析爲JSX。但是，這發生在編譯時（不是運行時），這會阻止您使用動態組件。

如果您想使用動態組件，那麼您的構建器方法必須返回組件類或組件實例。

function getDynamicComponent() { 
    return Sections; 
} 
function render() { 
    const Component = getDynamicComponent(); 
    return <Component />; 
} 

// or 

function getDynamicComponentInstance() { 
    return <Sections />; 
} 
function render() { 
    const component = getDynamicComponentInstance(); 
    return component; 
}

從"<Sections />"推斷正確組件的唯一方法是手動解析它並使用eval將名稱解析到相應的變量。解析JSX不是微不足道的，使用eval很可能會使您面臨整個類別的安全漏洞。

除非你的動態組件名稱來自網絡的到來，或者從單獨的工作裏面，有沒有理由返回動態組件的功能不能被上面寫的一樣的例子。

來源

2016-07-05 11:56:03

丹，我的部件名稱t.getComponent一個list（）方法，這將給我在HTML字符串的名字，我要渲染它的UI。 – user2114575

如果您以JSX形式返回字符串，那麼您將遇到困難。最好的選擇是重寫你的函數來返回實際的JSX。 –

在React JS中調用動態組件

回答

相關問題