Javascript 如何从CDN加载React.Component并呈现到另一个React.Component中

注：所有答案均无效[请勿删除此注释]

简单的问题，我有一个项目， npx创建react应用程序react项目（考虑此项目）

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

import React, { Component } from 'react'

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

import React，{Component}来自“React”
导出默认类应用程序扩展组件{
render（）{
返回(
你好
)
}
}

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

import React，{Component}来自“React”
导出默认类Comp扩展组件{
render（）{
返回(
世界
)
}
}

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

所以

import React，{Component}来自“React”
//不知何故，在某处导入Comp.js，然后
导出默认类Comp扩展组件{
render（）{
返回(
你好
)
}
}

而ofc的输出应该是

你好，世界

当我运行项目react项目时，如果在CDN中我将

WORLD

更改为

EARTH

，则输出中也应将

WORLD

更改为

EARTH

所以现在react项目的输出是

HELLO EARTH

我把我所有的代表都投入到这个悬赏中，如果你喜欢这个问题，请向上投票，以帮助我吸引注意力

注意：我的需要是在React project Y中显示React project X，而不涉及project Y的大部分内容，ofc更新project X而不更新project Y中的任何内容，因此，

在这里不起作用，块名会改变，如果你能找到一种不改变它的方法，那很好，请分享。如果您知道一种将其捆绑到chunk.js中的有效方法，请共享

---

只要项目X独立于项目Y，并且我可以在不更改项目Y的情况下对项目X进行更改，则欢迎使用任何方法进行此操作

选项1-创建NPM包 将项目X变成一个模块

这意味着您将进入projectx开发文件夹，运行

npm登录

和

npm发布

。你可以阅读更多关于这方面的内容

之后，一旦您的软件包在NPM上，您就可以转到Y项目并执行以下操作：

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

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

import React, { Component } from 'react'

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

基本上是非人类可读的代码，可通过

标记进行解析。然后，您必须转到

index.html

并将其注入其中，或者使用一些模块，如

我强烈建议选择选项1。因为这是首选的方式。从React项目中创建NPM包，并一步一步地进行

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

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

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

选项3-使您的url仅提供JSX，并将其加载到

DangerlySetinerHTML

中。 假设您的客户只提供以下内容：

<div>
  WORLD
</div>

基本上是这样的：

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

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

const otherProjectJSX='WORLD'
常量MyApp=（）=>

---

我不建议这样做，但如果这只是您关心的

render（）

内部的内容，那么它可能终究会起作用。

我很确定这不是实现它的方法，您是否有严格的理由需要将它从CDN中拆分为纯JSX？如果您构建组件，然后以CDN JavaScript为目标，则执行此操作的可能性更高。@AntonioErdeljac告诉我执行此操作的任何方法，捆绑或非捆绑都无所谓，只要我可以在另一个React项目中显示它，目标是在项目Y中显示项目X，同时保持两者独立，这样我就可以更新projectx，而无需更新ProjectY@AKC为什么不将project-y作为一个包，并在project-x package.json中使用它（将包直接链接到github like:）这是一个非常有趣的答案，我正在阅读并尝试它，但我刚刚阅读了您的选项3，听起来不错，我有一个问题，内部的HTML不就是HTML吗？如果我们像这个世界一样在HTML中添加js{this.javascriptFunctions}这会起作用吗？@AKC不，不幸的是这不会起作用。这纯粹是为了呈现HTML，对不起，这就是为什么它是最后一个解决方案。我几乎100%确定选项1就是您想要的嘿，选项1看起来不错，但不会。npm包将下载到本地npm#U模块文件夹中，因此即使我在线更新npm包并保持版本不变，它仍然不会更新本地npm#U模块，这不意味着它仍然会显示旧的react组件吗？或者我遗漏了什么，它会显示更新后的react组件吗？还有，一旦我得到bundle.js（我没有看到任何bundle.js，但我看到了看起来类似的main.chunk.js），我如何将Comp JSX组件添加到应用程序组件中？

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

<div>
  WORLD
</div>

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