Question

我正在使用React.js开发一个相当复杂的Web应用程序，我想让应用程序的用户在其网站上使用其中一个组件作为API小部件以及脚本标记（想想谷歌地图API，分析等。）

我是React的新手，但我认为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>

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

透明单个React组件用作JS小部件

1 个答案: