web-dev-qa-db-fra.com

puis-je utiliser jsx sans React pour inline html dans le script?

Puis-je inline HTML dans un script comme ci-dessous en utilisant une bibliothèque comme jsx:

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

J'ai pu écrire des fichiers JSX et les injecter dans une page HTML en utilisant un "faux" React fichier.

no-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;
    }
};

Compilez ensuite votre 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>
);

Résultat "test.js" compilé

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")));

Et enfin, la page HTML qui comprend les deux scripts.

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>
24
Steven Spungin

JSX n'est pas un langage de modèle basé sur des chaînes; il compile les appels de fonction JavaScript réels. Par exemple,

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

transpile vers

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

Je cherchais quelque chose comme ça moi-même. Un moyen d'écrire des composants et JSX comme pour des projets simples. Je n'en ai pas trouvé un que j'ai aimé, j'ai donc construit ceci: https://github.com/SagiMedina/Aviya#aviya Jetez un coup d'œil, cela répondra peut-être aussi à votre problème.

6
Sagi Medina

React restitue la syntaxe html JSX en JS en utilisant des fonctions telles que React.createElement (entre autres pour Fragments et ainsi de suite). Mais tout se résume au plugin @ babel/plugin-transform-react-jsx qui effectue le transpiling de ceci:

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

dans ce ...

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

Cependant, vous pouvez remplacer React.createElement par votre propre fonction pour ce faire. Vous pouvez en savoir plus à ce sujet ici: https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html

Vous devriez également regarder les bibliothèques qui font exactement cela, comme nervjs , jsx-render et dek . Tous ces éléments utilisent une syntaxe html JSX sans réagir. Certains (tels que le rendu jsx) se concentrent uniquement sur la conversion de JSX en JS final, ce qui pourrait être ce que vous recherchez.

L'auteur de ce package a écrit un article à ce sujet ici: https://itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561

TypeScript peut également le faire si vous l'utilisez ... mais je n'ai aucune expérience de première main.

Pour résumer

Vous pouvez le faire sans React, mais pas sans Babel ou TypeScript.

4
Luke Watts

Vous pouvez consulter la documentation: transformation JSX dans le navigateur , et voir également documentation Babel

Vous pouvez réaliser ce que vous voulez, mais c'est découragé dans la production ...

1
Mike Aski

Jsx analyse la return (<div>test html code</div>); vers quelque chose comme ça return React.createElement('div', {...});

alors si vous n'utilisez pas react.js, le navigateur ne saura pas ce qu'est React et déclenchera une erreur.

0
Chenglu