Reactjs 仅持有状态且不'；不为交流而渲染

我正在尝试构建一个可重用的组件，可以通过双击（DFP）异步加载广告。我遇到的问题是，在广告实际加载之前，有几个依赖项，我不确定处理通信和序列的最佳方式。由于广告组件在页面上的任何位置呈现，并且不作为父级的一部分呈现，因此我不确定如何处理它，因为我无法将广告嵌入父级以进行通信

在本文中：

有这个潜在的解决方案，但经过一些搜索后，我无法找到一个不将渲染联系在一起的示例

“如果您找不到拥有状态有意义的组件，请创建一个新组件以保存状态，并将其添加到公共所有者组件之上的层次结构中。”

以下是详细信息/步骤：

1） 。我首先需要加载JS 这将创建一个全局googletag对象

2） 。我需要设置适用于所有广告标签（可配置）的全局目标（即网站名称、内容类型等）

示例

    googletag.pubads().setTargeting('site', window.location.hostname);

3） 。我需要定义的广告时段和目标的个别广告时段的反应

    googletag.defineSlot('/12345/zone', [[300, 250], [300, 600]], 'div-gpt-ad-300x250-0').addService(googletag.pubads()).setTargeting('pos', 'sidebar_300_1');

4） 。我需要全局指定设置

    googletag.pubads().collapseEmptyDivs();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();

5） 。我需要渲染广告槽（带有单独或全局渲染选项）

或者只是

googletag.display();    

我最初创建了两个组件：一个DFPManager，它加载一次所需的Javascript，然后是一个DFPAd，它实际处理单个广告。我无法理解通信

我还需要能够根据外部事件（即ajax页面更改）重新加载单个广告，或者在用户滚动到无限滚动内容时创建新广告

管理我自己的事件系统的最佳解决方案是在组件中放置侦听器以依赖外部事件，还是有更好的方法来管理它？在这种情况下，我不一定需要DFPManager，因为那里没有渲染，我可以在准备好时触发事件。对于分析跟踪来说，这是一个类似的问题，我需要根据外部事件跟踪页面浏览量，但只有在首次加载初始javascript（即Google analytics tracking js）之后

/**@jsx React.DOM*/
React.renderComponent(
,
document.getElementById（'300-250-ad'）
);

---

我可能想得太多了。感谢您的建议。

将DFPManager变成一个触发更改事件的对象听起来是个不错的计划。它将不再是一个反应组件本身。单个ad组件可以接受store对象作为道具，然后在componentDidMount中订阅更改事件，并在componentWillUnmount中取消订阅。onChange处理程序可以使用存储区中的当前数据调用setState，这将触发重新渲染

---

该存储可以像示例中的存储一样实现，它使用EventEmitter基类。如果没有交互性，使用完整的调度程序可能会有些过分，因为它的声音不会导致任何用户操作。

谢谢，道格拉斯。我还发现了一个关于DOM事件侦听器的示例，它似乎建议使用类似的设置。感谢您的帮助。您是否成功编写了此可重用组件？你能分享吗？

googletag.display();    

<div id="300-250-ad"></div>
<script type="text/jsx">
    /** @jsx React.DOM */
    React.renderComponent(
        <DFPAd size={[[300, 250], [300, 600]]} targeting={[["pos", "sidebar_300_1"]]} />,
        document.getElementById('300-250-ad')
    );
</script>