Подтвердить что ты не робот

Могу ли я использовать jsx без React для встроенного html в script?

Можно ли встроить HTML в script, как показано ниже, с помощью библиотеки jsx:

<script src="jsx-transform.js"></script>
<script type="text/jsx">
define('component', function () {
   return (<div>test html code</div>);
});
</script>
4b9b3361

ОТВЕТЫ

Ответ 1

Я смог написать JSX файлы и ввести их в HTML-страницу, используя "поддельный" файл React.

не-react.js

/**
 * Include this script in your HTML to use JSX compiled code without React.
 */

const React = {
    createElement: function (tag, attrs, children) {
        var element = document.createElement(tag);

        for (let name in attrs) {
            if (name && attrs.hasOwnProperty(name)) {
                let value = attrs[name];
                if (value === true) {
                    element.setAttribute(name, name);
                } else if (value !== false && value != null) {
                    element.setAttribute(name, value.toString());
                }
            }
        }
        for (let i = 2; i < arguments.length; i++) {
            let child = arguments[i];
            element.appendChild(
                child.nodeType == null ?
                    document.createTextNode(child.toString()) : child);
        }
        return element;
    }
};

Затем скомпилируйте ваш jsx.

test.jsx

const title = "Hello World";
document.getElementById('app').appendChild(
    <div>
        <h1>{title}</h1>
        <h2>This is a template written in TSX, then compiled to JSX by tsc (the Typescript compiler), and finally
            injected into a web page using a script</h2>
    </div>
);

Результат скомпилированного 'test.js'

var title = "Hello World";
document.querySelector('#app').appendChild(React.createElement("div", null,
    React.createElement("h1", null, title),
    React.createElement("h2", null, "This is a template written in TSX, then compiled to JSX by tsc (the Typescript compiler), and finally" + " " + "injected into a web page")));

И, наконец, страница HTML, содержащая оба сценария.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>no-react</title>
    <script src="no-react.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

<script src="test.js"></script>

Ответ 2

JSX не является строковым языком шаблонов; он компилируется для вызовов функций JavaScript. Например,

<div attr1="something" attr2="other">
  Here are some <span>children</span>
</div>

переводит на

React.createElement("div", {attr1: "something", attr2: "other"}, 
  "Here are some ", React.createElement("span", null, "children")
)

Ответ 3

Я сам искал что-то подобное. Способ написания компонентов и JSX, как для простых проектов. Не нашел тот, который мне понравился, поэтому я построил это: https://github.com/SagiMedina/Aviya#aviya Посмотрите, может быть, это также решит вашу проблему.

Ответ 4

React отображает синтаксис JSX html в JS, используя такие функции, как React.createElement (среди прочего, для фрагментов и т.д.). Но это все сводится к плагину @babel/plugin-transform-Reaction-jsx, который выполняет это:

return(<div id="hello">Hello World</div>)

в это...

return React.createElement('div', {id: 'hello'}, 'Hello World');

Однако вы можете заменить React.createElement своей собственной функцией, чтобы сделать это. Вы можете прочитать больше об этом здесь: https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html

Вы также должны посмотреть на библиотеки, которые делают именно это, например, nervjs, jsx-render и deku. Все они используют синтаксис JSX HTML без реакции. Некоторые (такие как jsx-render) ориентированы только на преобразование JSX в окончательный JS, что может быть тем, что вы ищете.

Автор этого пакета написал статью об этом здесь: https://itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561

Также Typescript может сделать это, если вы используете это... но у меня нет непосредственного опыта с этим.

Подводить итоги

Вы можете сделать это без React, но не без Babel или Typescript.

Ответ 6

Jsx разобрать return (<div>test html code</div>); на что-то вроде этого return React.createElement('div', {...});

то если вы не используете react.js, браузер не будет знать, что такое React, и вызывает ошибку.