仅保留状态并且不呈现通信的父级

我在尝试构建可用于通过Doubleclick（DFP）异步加载广告的可重用组件。我遇到的问题是在广告实际加载之前存在一些依赖关系，并且我不确定处理通信和序列的最佳方式。由于广告组件呈现在页面上的任何位置，并且不会作为父级的一部分呈现，因此我不知道如何处理它，因为我无法在父级中嵌入广告进行通信。仅保留状态并且不呈现通信的父级

本文内容： http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html#step-4-identify-where-your-state-should-live

有这种潜在的解决方案，但经过一番搜索，我无法找到不配合渲染在一起的例子。

“如果你不能找到它是有道理的自己状态的组件，只需创建一个新的组件，用于保持国家和地方的共同所有者部件上面的层次结构添加它。”

下面是详细信息/步骤：

1）。我首先需要加载JS http://www.googletagservices.com/tag/js/gpt.js 这会创建一个全局googletag对象。 2）。我需要设置适用于所有广告代码的全局定位（即网站名称，内容类型等）（可配置）。

例

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

3）。我需要为React呈现的单个广告位定义广告位和定位。

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.cmd.push(function() { 
     googletag.display(divIdAttribute); 
    });

或只是

googletag.display();

我最初创建了两个组件：加载必要的JavaScript一次DFPManager，然后一个实际处理单个广告的DFP广告管理系统。我无法弄清楚沟通。

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

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

<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>

我可能会过时地这样做。感谢任何建议。

来源

2014-09-04 cristian

你是否设法编写这个可重用组件？你可以分享吗？ – Unenumrated 2015-03-26 09:06:19

将DFPManager转换为引发变化事件的对象听起来像是一个很好的计划。它不会再是一个React组件。各个广告组件可以接受商店对象作为道具，然后订阅componentDidMount中的更改事件，并在componentWillUnmount中取消订阅。 onChange处理程序可以使用商店中的当前数据调用setState，这将触发重新渲染。

该商店可以像Flux TodoMVC示例中的商店一样实施，该示例使用EventEmitter基类。如果没有交互性，那么使用完整的调度程序可能是过度的，因为它的声音不会有任何用户操作。

来源

2014-09-04 11:55:10 Douglas

谢谢道格拉斯。我还在DOM Event Listeners上找到了一个似乎推荐类似设置的例子。 http://facebook.github.io/react/tips/dom-event-listeners.html欣赏帮助。 – cristian 2014-09-06 00:12:12

仅保留状态并且不呈现通信的父级

回答

相关问题