Skip to content

Instantly share code, notes, and snippets.

@danielstocks
Created September 19, 2017 14:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save danielstocks/874b04775eb9574c7f282e1a0abee521 to your computer and use it in GitHub Desktop.
Save danielstocks/874b04775eb9574c7f282e1a0abee521 to your computer and use it in GitHub Desktop.
const testPageJSON = {
"children": [
{
"el": "div",
"props": {
"style": {
"background": "green"
}
},
"children": [
{
"el": "h1",
"props": {
"style": {
"color": "red"
}
},
"children": [
"The quick brown fox jumped over the lazy dog"
]
},
{
"el": "h2",
"children": [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
]
}
]
}
]
}
class App extends Component {
render() {
return (
<div className='root' style={{'background': 'yellow'}}>
{testPageJSON.children.map(child => (
<RecursiveNode node={child} />
))}
</div>
);
}
}
class RecursiveNode extends Component {
render() {
const node = this.props.node
if(typeof(node) === 'string') {
return <span>{node}</span>
}
const el = React.createElement(
node.el,
node.props,
node.children.map(child => (
<RecursiveNode node={child} />
))
)
return el
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment