Question

此刻，我将元素添加到DOM中并在双引号内添加带有html的append，这会变得非常混乱并且很难阅读，特别是如果其中包含变量，在React中，您将使用干净的JSX ，是否可以在普通的JQuery脚本或类似JSX中使用JSX？

Answer 1

是的，有两个选择：

模板文字
JSX

模板文字

在现代JavaScript中，您可以使用模板文字而不是字符串文字，并且它们可以在其中包含带有JavaScript表达式的占位符：

let counter = 0;

$(`<table class="main">
    <tbody>
        <tr>
            <td>Cell ${counter++}</td>
            <td>Cell ${counter++}</td>
        </tr>
        <tr>
            <td>Cell ${counter++}</td>
            <td>Cell ${counter++}</td>
        </tr>
    </tbody>
</table>`).appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

肯定还有一些尴尬，但这比字符串文字好得多。

有关模板文字on MDN的更多信息。

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 =
    <table class="main">
        <tbody>
            <tr>
                <td>Cell {counter++}</td>
                <td>Cell {counter++}</td>
            </tr>
            <tr>
                <td>Cell {counter++}</td>
                <td>Cell {counter++}</td>
            </tr>
        </tbody>
    </table>;
table.appendTo(document.body);

（请注意，这是class="main"，而不是className="main"。使用className是React的事情，以避免自ES5出现以来就没有问题的问题在2009年。）

输出为：

let counter = 0;
let table =
    be('table', {class: "main"}, [
        be('tbody', null, [
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ]),
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ])
        ])
    ]);
table.appendTo(document.body);

注意如何将JSX表达式转换为对工厂函数的调用（在该示例中为be； React的工厂函数为React.createElement）。您所要做的就是提供be函数并将变压器集成到您的构建链中（jsx-transform预先具有插入Browserify的功能）。

您使用jQuery的be可能看起来像这样：

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', {class: "main"}, [
        be('tbody', null, [
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ]),
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ])
        ])
    ]);
table.appendTo(document.body);

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

令人惊讶的是，它真的就是这么简单。

很好地使用JQuery将HTML元素添加到DOM

1 个答案:

模板文字

JSX