在运行时从普通 JSX 外部脚本加载 React 组件

Question

一般来说，我必须在运行时加载和呈现我在某处未编译的 JSX 纯脚本中拥有的 React 组件的选项是什么：可能来自字符串或来自 url。显然，组件脚本可以从同一应用程序的其他（静态）组件或其他外部包导入。

注意：是公司内部的web app，没有很强的安全要求。

Answer 1

我知道的唯一 easy-ish 选项是使用 Babel Standalone，它在 client-side 上进行 JSX 到 JS 的转换。将 JSX 字符串插入 <script type="text/babel">，并将 React、React DOM 和 Babel Standalone 作为脚本包含在页面上。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div class='react'></div>

<script>
const jsxTextToInsert = `
    const App = () => {
        return 'foo';
    };

    ReactDOM.render(<App />, document.querySelector('.react'));
`;

const script = document.body.appendChild(document.createElement('script'));
script.type = 'text/babel';
script.textContent = jsxTextToInsert;
</script>

在运行时从普通 JSX 外部脚本加载 React 组件

Load a React component at runtime from a plain JSX external script

compilation

external-script

reactjs

react-component