I would like to render a <section> element using React but only if certain conditions are met.
The problem is I can't nest the <section> within a <div> so the highest level DOM element besides <body> is <section>
My HTML:
<section id="my_element"></section>
My React:
ReactDOM.render(
<div className="container">
...
</div>,
document.getElementById('my_element')
);
I know with Angular directives you can replace the original DOM element with your rendered element by using replace: true
app.directive('myElement', function(){
return {
replace: true,
...
}
};
});
Is something similar available in React?
I would like to render a <section> element using React but only if certain conditions are met.
The problem is I can't nest the <section> within a <div> so the highest level DOM element besides <body> is <section>
My HTML:
<section id="my_element"></section>
My React:
ReactDOM.render(
<div className="container">
...
</div>,
document.getElementById('my_element')
);
I know with Angular directives you can replace the original DOM element with your rendered element by using replace: true
app.directive('myElement', function(){
return {
replace: true,
...
}
};
});
Is something similar available in React?
Share Improve this question asked Nov 5, 2015 at 3:05 Jared WhippleJared Whipple 1,1714 gold badges17 silver badges40 bronze badges 1- stackoverflow./questions/30686796/… – user120242 Commented Nov 5, 2015 at 4:21
2 Answers
Reset to default 4Not currently implemented yet: https://github./facebook/react/issues/1311
Follow this issue to see development: https://github./facebook/react/issues/1711
StackOverflow question that has a workaround:
React.render replace container instead of inserting into
Workaround involves creating a temporary div, and then replacing the node.
You can use some case to da that. I prefer do this:
render(){
return [<div>test</div>, <div>test2</div>]
}
this is answer on your question: https://github./facebook/react/issues/2127