转译单个 React 组件以用作 JS 小部件

Question

我正在使用 React.js 开发一个相当复杂的 Web 应用程序，我希望允许该应用程序的用户将其中一个组件用作其网站上的 API 小部件以及脚本标签（想想 Google 地图 API、分析等）

我是 React 的新手，但我认为 React 获取了应用程序中的所有组件等，并将它们捆绑到一个 JS 文件中。

是否可以只将一个组件捆绑到一个 JS 文件中，然后让用户将该文件放在他们的站点中，并将其用作小部件？

我试过使用 reactify 转译我希望用户用作小部件的组件，但我似乎无法让它工作。

有什么想法吗？

Answer 1

当然可以，但是他们仍然需要将 React 作为依赖项包含在内，否则您将不得不在您的小部件中。

要使用 React，您不需要使用转译，即您不需要 reactify。为 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>

您需要转换代码的唯一原因是使用 JSX 和 ES6。

转译单个 React 组件以用作 JS 小部件

Transpile single React component to use as JS widget

javascript

api

reactjs

web-applications

reactify