Как загрузить React.Component из CDN и выполнить рендеринг в другой React.Component - PullRequest
Новая
       172

Как загрузить React.Component из CDN и выполнить рендеринг в другой React.Component

1 голос
/ 06 августа 2020

Примечание: ни один из ответов на самом деле не работает [НЕ УДАЛЯЙТЕ ЭТО ПРИМЕЧАНИЕ]

простой вопрос, у меня есть проект npx create-response-app response-project (рассмотрите этот проект Y)

сейчас внутри приложения этого проекта. 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 в приложении. 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>
    )
  }
}

и c вывод должен быть

HELLO WORLD

, когда я запускаю проект response-project и если в CDN я меняю WORLD на EARTH он должен изменить WORLD на EARTH в выводе

, так что теперь вывод response-project равен HELLO EARTH

Я вкладываю всю свою репутацию в награду за это, Проголосуйте за, если вам нравится этот вопрос, чтобы помочь мне привлечь внимание.

ПРИМЕЧАНИЕ: мне нужно показать проект X React внутри проекта Y React, не затрагивая большую часть проекта Y и o f c обновите проект X, ничего не обновляя внутри проекта Y, так что да, <script src='chunk.js'/> здесь не будет работать, имя чанка изменится, если вы можете найти способ не менять его, тогда все отлично, сделайте Поделиться. Если вы знаете рабочий способ сделать это, объединенный в кусок. js ДЕЛИТЕСЬ!

ЛЮБОЙ СПОСОБ ДЕЛАТЬ ЭТО ПРИВЕТСТВУЕТ, если Project X не зависит от Project Y и Я могу вносить изменения в Project X, не меняя Project Y

1 Ответ

1 голос
/ 06 августа 2020

У вас есть несколько вариантов.

Вариант 1 - Создать NPM Пакет

Превратить Project X в модуль.

Это будет означать, что вы перейдете от go к Project X в папку разработки и запустите npm login и npm publish. Вы можете узнать больше об этом здесь

После этого, как только ваш пакет будет включен NPM, вы можете go на Project 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" />, так как это недопустимо JS без синтаксического анализатора, такого как Babel.

Я бы сделал go на Project X и запустите npm run build. После этого я получал bundle.js - связанный и минифицированный скрипт, написанный на Plain 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 и вставить его туда или использовать некоторые из модулей, например response-script-tag

Я очень рекомендую использовать Option №1. Поскольку это предпочтительный способ получения go. Изучите создание пакетов NPM из вашего проекта React и следуйте шаг за шагом.

Еще несколько полезных ссылок о Варианте №1:

Создайте простой пакет React npm простыми шагами с использованием CRA

Как опубликовать sh ваш компонент React на npm

Надеюсь, это поможет вам в правильном направлении, но текущий способ, которым вы это делаете, не- go

РЕДАКТИРОВАТЬ - Технически есть вариант №3, но я бы не рекомендовал его.

Вариант 3. Сделайте так, чтобы ваш URL-адрес предоставлял только JSX, и загрузите его в dangerouslySetInnerHtml.

Допустим, ваш https://codepen.io/sirakc/pen/ZEWEMjQ.js предоставит только это: 

<div>
  WORLD
</div>

Технически, вы могли бы затем превратить свою ссылку в нечто более читабельное, например .txt расширение, получить его, сохранить в переменной и загрузить в dangerouslySetInnerHTML.

, например: 

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(), вас волнует бой - все-таки может сработать.

...