Переносимый единый компонент React для использования в качестве виджета JS

Question

Я работаю над довольно сложным веб-приложением с использованием React.js, и я хотел бы разрешить пользователям приложения использовать один из компонентов в качестве виджета API на своих сайтах, а также с тегом сценария (думаю, API Карт Google, Analytics и т. д.)

Я новичок в реактиве, но я думаю, что React принимает все компоненты и т. д. в приложении и связывает их в один JS-файл ,

Возможно ли связать только один компонент в JS-файле, а затем позволить пользователям разместить этот файл на своем сайте и использовать его в качестве виджета?

Я пробовал перекопировать компонент, который я хочу, чтобы пользователи использовали в качестве виджета с reactify, но я не могу заставить его работать.

Любые мысли?

Answer 1

Абсолютно, однако им все равно необходимо включить React в качестве зависимости, или вам придется в вашем виджете.

Чтобы использовать React, вам не нужно использовать транспиляцию, то есть вам не нужно реактивировать. Создание виджета для React похоже на создание виджета для jQuery.

// Your widget root component 
 
var SayHelloComponent = React.createClass({ 
 
    render() { 
 
    // You use React.createElement API instead of JSX 
 
    return React.createElement('span', null, "Hello " + this.props.name + "!"); 
 
    } 
 
}); 
 

 

 
// This is a function so that it can be evaluated after document load 
 
var getWidgetNodes = function() { 
 
    return document.querySelectorAll('[data-say-hello]'); 
 
}; 
 

 
function initializeWidget(node) { 
 
    // get the widget properties from the node attributes 
 
    var name = node.getAttribute('data-say-hello'); 
 

 
    // create an instance of the widget using the node attributes 
 
    // as properties 
 
    var element = React.createElement(SayHelloComponent, { name: name }); 
 
    ReactDOM.render(element, node); 
 
} 
 

 
getWidgetNodes().forEach(initializeWidget);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<!-- What it would look to include your widget in a page --> 
 
<div data-say-hello="Guzart"></div>

Единственная причина, вам нужно будет transpile ваш код будет использовать JSX и ES6.