web-dev-qa-db-ja.com

React=なしでjsxを使用して、スクリプトでhtmlをインライン化できますか？

Jsxなどのライブラリを使用して、以下のようにスクリプトでHTMLをインライン化できますか？

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

JSXファイルを記述し、「偽」Reactファイルを使用してHTMLページに挿入することができました。

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

次に、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>
24
Steven Spungin

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")
)
8
Michelle Tilley

私はこのようなものを自分で探していました。単純なプロジェクトのようにコンポーネントとJSXを記述する方法。気に入ったものが見つからなかったので、これを作成しました： https://github.com/SagiMedina/Aviya#aviya 見て、多分それはあなたの問題にも答えるでしょう。

6
Sagi Medina

Reactは、React.createElementなどの関数を使用して、JSのhtml構文をJSにレンダリングします（特にフラグメントなど）。しかし、それはすべて、これをトランスパイルする@ babel/plugin-transform-react-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 、および dek など、これを正確に行うライブラリもご覧ください。これらはすべて、反応することなくJSX html構文を使用します。一部（jsx-renderなど）は、JSXを最終的なJSに変換することのみに焦点を当てています。

そのパッケージの作者は、それについての記事をここに書きました： https://itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561

また、TypeScriptを使用すると、これを行うことができます...しかし、私はそれを直接経験していません。

合計する

Reactなしでもできますが、BabelやTypeScriptなしではできません。

4
Luke Watts

次のドキュメントを参照できます： in-browser JSX transform 、および Babel documentation

あなたが望むものを達成することができますが、それは生産では落胆しています...

1
Mike Aski

Jsxはreturn (<div>test html code</div>);をこのようなreturn React.createElement('div', {...});に解析します

react.jsを使用しない場合、ブラウザはReactが何であるかを認識せず、エラーをトリガーします。

0
Chenglu