I have a following config as JSON
var componentConfig = {
content: { type: "ContentContent", data: "content"},
new_content: { type: "ContentFormContent", data: "content"}
}
In react rendercomponent, is it possible to pass the component name dynamically to react render.
for e.g in this rendercomponent instead of putting the ContentFormContent directly is it possible to pass the data from json config and i can loop or something.
React.renderComponent(<ContentFormContent data={[componentConfig.new_content.data]} />, body);
SO i will have a list of pages in json config and based on the selection of particular nav i will render the component based on its 'type' from the json file
The JSX
<ContentFormContent data={[componentConfig.new_content.data]} />
simply compiles to
ContentFormContent({data: [componentConfig.new_content.data]})
so you can make that function call however you like. In this case, it's probably most convenient to make a list of all possible components and do something like
var allComponents = {
ContentContent: ContentContent,
ContentFormContent: ContentFormContent
};
// (later...)
React.renderComponent(allComponents[component.type]({data: component.data}), body);
if component
is an element from your example array.
React.renderComponent() has been deprecated, to use React.render() https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#deprecations
You may do something like:
var loadReactModule = function ($root, type, data) {
var ContentContent= React.createClass({
render: function () {
return (
<input type="text" placeholder="My Module-Input"/>
);
}
});
var ContentFormContent= React.createClass({
render: function () {
return (
<form></form>
);
}
});
var allComponents = {
ContentContent: ContentContent,
ContentFormContent: ContentFormContent
};
if (type in allComponents) {
$root.each(function (index, rootElement) {
React.render(React.createElement(allComponents[type]), {data:data}, rootElement);
});
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With