Question

正如主题所说，我需要将虚拟DOM注入字符串以动态呈现自定义的反应组件。我将使用波纹管代码来帮助解释我的意图。我已经定义了两个组件：

<script>
    var udemyServerData = <?=json_encode($udemyKeywords)?>; //loading php array into JS array

    var courseraServerData = <?=json_encode($courseraKeywords)?>;//loading another php array into JS array                                              

    var commonServerData = udemyServerData.concat(courseraServerData);
    var modifiedServerData = new Array();
    for (i = 0; i < udemyServerData.length; i++) { 
    modifiedServerData.push({
    "value": 'udemy',
    "text": udemyServerData[i]
    });
}
    for (i = 0; i < courseraServerData.length; i++) { 
    modifiedServerData.push({
    "value": 'coursera',
    "text": courseraServerData[i]
    });
}

    console.log(udemyServerData);
    console.log(courseraServerData);
</script>

我还有一个字符串变量，用于定义组件组合。

class Component_A extends React.Component {
render() {
    return ( 
       <div > 
           <h1>This is Component_A </h1>
           {this.props.children} 
       </div>
    );
}

class Component_B extends React.Component {
    render() {
        return ( 
            <div >
              <h1> This is Component_B </h1>
            </div>
        );
    }
}

那么如何将此字符串注入React以呈现组件？类似于实现下面的意图：

var testStr = "<Component_A><Component_B><Component_B></Component_A>".

}

字符串变量的原因是，我有许多其他自定义组件，如Component_C，Component_D等。我还从远程服务器获取了许多其他字符串变量，用于定义上述组件的不同组合。

所以我想通过将字符串注入React Render来动态渲染组件。这与

不同

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

因为它是html字符串注入并且可以识别标准html标记。但是对于我的问题，标签是定制的。

有可能吗？

如何将虚拟DOM注入字符串以动态呈现自定义的反应组件

0 个答案: