我曾使用：/** @jsx h */
const h = (type, props = {}, children = []) => ({
type,
props,
children
});
const WelcomeComponent = ({ name }) => h('div', {}, ['Welcome ' + name]);
const RootComponent = ({ user }) => {
if (user) {
// The vDOM node's type can also be another
// component. React calls it automatically when creating
// the vDOM tree
return h(WelcomeComponent, { name: user.name });
} else {
return h('div', {}, [`Please, Log in`]);
}
}
// To simplify the correlation of nodes in the vDOM and DOM,
// we generate a unique ID for each DOM node. These are just
// dot-delimited paths containing the index of each child in
// the list of children maintained by its parent.
// This allows us to use simple string manipulation to implement
// advanced features like a synthetic event system
const createVDOM = (element, id = '.') => {
// This function must be called recursively for all descendants
// in order to transform the entire tree
console.log("element is",element," and id is",id)
const newElement = {
...element,
id,
children: element.children.map((child, index) => createVDOM(child, `${id}${index}.`))
};
console.log("newElement is",newElement)
// Is this a component?
if (typeof element.type === 'function') {
// Call the component and pass in the props.
// Returns the generated subtree
const subtree = newElement.type(element.props);
console.log("subtree is",subtree)
// Call ourself recursively in order to assign the right ID
// to the nodes and process any subcomponents in the subtree
return createVDOM(subtree, id);
} else {
// If we come across an element that is not a function,
// all we have to do is return it
console.log("return New Element is",newElement)
return newElement
//return document.createTextNode(element);
}
};
/*
const a = (
<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul>
);
*/
const $root = document.getElementById('root');
console.log("The file is loaded")
$root.appendChild(createVDOM(RootComponent({ user: { name: 'Ramesh' } })));
仅接受字母和数字，但目前它接受其他语言，表情符号，特殊字符以及所有其他语言。谁能告诉我哪里错了。