Question

我正在尝试构建一个可重复使用的组件，我可以通过Doubleclick（DFP）异步加载广告。我遇到的问题是，在广告实际加载之前存在多种依赖关系，而且我不确定处理通信和顺序的最佳方式。由于广告组件会在网页上的任意位置呈现，而不会作为父级的一部分呈现，因此我无法确定如何处理它，因为我无法将广告嵌入父级内进行通信。< / p>

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

有这种潜在的解决方案，但经过一些搜索后，我无法找到一个不能将渲染结合在一起的例子。

＆＃34;如果您找不到拥有该状态的组件，请创建一个新组件，仅用于保存状态并将其添加到公共所有者组件上方的层次结构中。＆＃ 34;

以下是详细信息/步骤：

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>

我可能会过度思考这个问题。感谢任何建议。

Answer 1

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

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

只保留状态且不进行通信的父级

1 个答案: