andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Format snippets

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-11-03 22:11:18 +02:00
parent 15dcd4d184
commit 05e3f6dc07
13 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
snippets/renderElement.md
View File

@ -22,16 +22,18 @@ const renderElement = ({ type, props = {} }, container) => {
const isAttribute = p => !isListener(p) && p !== 'children';
Object.keys(props).forEach(p => {
if(isAttribute(p)) element[p] = props[p];
if(!isTextElement && isListener(p))
if (isAttribute(p)) element[p] = props[p];
if (!isTextElement && isListener(p))
element.addEventListener(p.toLowerCase().slice(2), props[p]);
});
if(!isTextElement && props.children && props.children.length)
props.children.forEach(childElement => renderElement(childElement, element));
if (!isTextElement && props.children && props.children.length)
props.children.forEach(childElement =>
renderElement(childElement, element)
);
container.appendChild(element);
}
};
```
```js
@ -41,14 +43,9 @@ const myElement = {
type: 'button',
className: 'btn',
onClick: () => alert('Clicked'),
children: [
{ props: { nodeValue: 'Click me' } }
]
children: [{ props: { nodeValue: 'Click me' } }]
}
};
renderElement(
myElement,
document.body
);
renderElement(myElement, document.body);
```