目前,我在DOM中添加元素,并在双引号内附加html,这可能会变得非常混乱并且很难阅读,特别是如果你内部有变量,在React中你会使用干净的JSX,是否有在普通的JQuery脚本或JSX之类的东西中使用JSX的方法?
最佳答案
是的,有两种选择:
>模板文字
> JSX
模板文字
在现代JavaScript中,您可以使用模板文字而不是字符串文字,它们可以包含带有JavaScript表达式的占位符:
let counter = 0;
$(`
肯定还有一些尴尬,但它比字符串文字更好.
JSX
JSX不仅限于React.它有own specification和多个实现,例如jsx-transform
.
例如,这是一个简单的Node.js包装器,它使用它来转换文件:
var jsx = require('jsx-transform');
console.log(jsx.fromFile("input.jsx",{
factory: 'be'
}));
如果input.jsx是:
let counter = 0;
let table =
(注意那是class =“main”,而不是className =“main”.使用className代替React是为了避免自从ES5于2009年问世以来一直没有问题的问题.)
输出将是:
let counter = 0;
let table =
be('table',{class: "main"},[
be('tbody',null,[
be('tr',[
be('td',["Cell ",counter++]),be('td',counter++])
]),be('tr',counter++])
])
])
]);
table.appendTo(document.body);
注意JSX表达式是如何转换为对工厂函数的调用的(在该示例中; React的工厂函数是React.createElement).您所要做的就是提供be函数并将变换器集成到您的构建链中(jsx-transform预先烘焙,能够插入Browserify).
您使用jQuery可能看起来像这样:
function be(tagName,attributes,children) {
const result = $("<" + tagName + "/>");
if (attributes) {
result.attr(attributes);
}
if (children) {
if (Array.isArray(children)) {
for (const child of children) {
result.append(child);
}
} else {
result.append(child);
}
}
return result;
}
使用转换结果的be函数的实例:
let counter = 0;
let table =
be('table',counter++])
])
])
]);
table.appendTo(document.body);
function be(tagName,children) {
const result = $("<" + tagName + "/>");
if (attributes) {
result.attr(attributes);
}
if (children) {
if (Array.isArray(children)) {
for (const child of children) {
result.append(child);
}
} else {
result.append(child);
}
}
return result;
}
令人惊讶的是,它真的就是这么简单.
猜你在找的HTML相关文章