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

发布于 2025-01-27 03:05:05 字数 151 浏览 4 评论 0原文

一般而言，我必须在运行时加载和渲染的选项是什么，我在未编译的JSX Plain脚本中拥有的React组件是：也许是从字符串或URL中。显然，组件脚本可以从同一应用的其他（静态）组件或其他外部软件包中导入。

注意：这是针对公司的内部网络应用程序，也就是说，没有强大的安全要求。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最后的乘客 2025-02-03 03:05:05

我知道这样的唯一简单选择是使用babel独立，它可以在客户端对JS转换进行JSX。将JSX字符串插入＆lt; script type =“ text/babel”＆gt;，并包括react，react dom和babel独立作为页面上的脚本。

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

The only easy-ish option I'm aware of for something like that is to use Babel Standalone, which does JSX to JS transformation on the client-side. Insert the JSX string into a <script type="text/babel">, and include React, React DOM, and Babel Standalone as scripts on the page.

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

回复收藏 0 原文

~没有更多了~