如何从 CDN 加载 React.Component 并渲染到另一个 React.Component

Question

注意：没有一个答案真正起作用[请勿删除此注释]

简单的问题，我有一个项目，npx create-react-app react-project（考虑这个项目Y）

现在，在这个项目的 App.js 中

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        HELLO
      </div>
    )
  }
}

现在在 CDN 我有另一个 Comp.js（考虑这个项目 X）

https://codepen.io/sirakc/pen/ZEWEMjQ.js

import React, { Component } from 'react'

export default class Comp extends Component {
  render() {
    return (
      <div>
        WORLD
      </div>
    )
  }
}

现在我想将 Comp.js 显示到 App.js 中，就好像你从本地源文件夹中获取它一样

所以

import React, { Component } from 'react'
//somehow somewhere import Comp.js and then <Comp/>

export default class Comp extends Component {
  render() {
    return (
      <div>
        HELLO <Comp/>
      </div>
    )
  }
}

和 ofc output 应该是

你好世界

当我运行项目 react-project 并且如果在 CDN 中我将WORLD更改为EARTH它应该在 output 中将WORLD更改为EARTH

所以现在 react-project 的 output 是HELLO EARTH

为此，我将所有代表都投入到赏金中，如果您喜欢这个问题以帮助我吸引注意力，请点赞。

注意：我需要在 React 项目 Y 中显示 React 项目 X，而不涉及项目 Y 的大部分内容，并且 ofc 更新项目 X 而不更新项目 Y 中的任何内容，所以是的<script src='chunk.js'/>不是会在这里工作，块名称会改变，如果你能找到一种不让它改变的方法，那就太好了，分享一下。 如果您知道将其捆绑到 chunk.js 中的工作方式，请分享！

欢迎任何方式这样做，只要项目 X 独立于项目 Y 并且我可以在不更改项目 Y 的情况下更改项目 X

Answer 1

您手头有几个选项。

选项 1 - 创建 NPM Package

将Project X变成一个模块。

这意味着您将 go 到Project X开发文件夹，并运行npm login和npm publish 。 您可以在此处阅读更多相关信息

之后，一旦您的 package 在NPM上，您可以 go 到项目 Y并执行以下操作：

import React, { Component } from 'react'
import Comp from 'my-package'

export default class Comp extends Component {
  render() {
    return (
      <div>
        HELLO <Comp/>
      </div>
    )
  }
}

选项 2 - 加载捆绑的 JS

而不是让您的脚本加载以下内容：

import React, { Component } from 'react'

export default class Comp extends Component {
  render() {
    return (
      <div>
        WORLD
      </div>
    )
  }
}

这是 JSX 语法。 并且它不能在普通的 Vanilla JS 中读取 - 因此你不能像<script src="myscript.js" />那样导入它，因为如果没有像 Babel 这样的解析器，这不是有效的 JS。

我会 go 到Project X并运行npm run build 。 之后我会得到bundle.js - 用普通 JS 编写的捆绑和缩小脚本。 它看起来像这样：

(this.webpackJsonpchrome_extension=this.webpackJsonpchrome_extension||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(99)},,function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)

基本上非人类可读的代码，可由<script src="myscript.js" />标签解析。 然后你必须 go 到你的index.html并在那里注入它，或者使用一些模块，如react-script-tag

我强烈推荐使用选项#1。 因为这是 go 的首选方式。 研究从您的 React 项目中创建 NPM 包，然后逐步进行操作。

关于选项 #1 的一些更有用的链接：

使用 CRA 在简单的步骤中创建一个简单的 React npm package

如何在 npm 上发布你的 React 组件

希望这将引导您朝着正确的方向前进，但是您目前的做法是行不通的

编辑 - 从技术上讲，有一个选项 #3，但我不推荐它。

选项 3 - 让您的 url 仅提供 JSX，并将其加载到dangerouslySetInnerHtml中。

假设您的https://codepen.io/sirakc/pen/ZEWEMjQ.js仅提供：

<div>
  WORLD
</div>

从技术上讲，您可以将您的链接变成更具可读性的内容，例如.txt扩展名，获取它，将其存储在变量中，然后将其加载到dangerouslySetInnerHTML的 SetInnerHTML 中。

例如：

const otherProjectJSX = somehowLoad(https://codepen.io/sirakc/pen/ZEWEMjQ.js)

const MyApp = () => <div dangrouslySetInnerHtml={otherProjectJSX} />

基本上是这样的：

const otherProjectJSX = '<div>WORLD</div>'

const MyApp = () => <div dangrouslySetInnerHtml={otherProjectJSX} />

我不建议这样做，但如果它只是你关心的render()内部的内容 - 它毕竟可能会起作用。