1

我正在使用 React.js 开发一个相当复杂的网络应用程序，我希望允许该应用程序的用户使用其中一个组件作为其网站上的 API 小部件以及脚本标签（想想 Google Maps API、Analytics、 ETC。）

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

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

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

有什么想法吗？

4

1 回答 1

1

当然，但是他们仍然需要将 React 作为依赖项包含在内，或者您必须在您的小部件中包含。

要使用 React，你不需要使用 transpilation，即你不需要 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。

于 2016-11-07T15:24:28.977 回答