预期的服务器HTML在<parentelement>中包含匹配的<element>

Question

在通用的ReactJS中，我故意根据浏览器或服务器是否呈现内容以相应地创建不同的控件来呈现不同的输出。这是使用exenv完成的，例如：

-?

这很好用，结果是预期的，但是我在控制台中收到警告：

<section>
  {ExecutionEnvironment.canUseDOM && (
    <div class="my-super-js-control"></div>
  )}
  {!ExecutionEnvironment.canUseDOM && (
  <span>Please enable JavaScript if you want the super JS control</span>
  )}
</section>

根据我的理解，在Warning: Expected server HTML to contain a matching <div> in <section>. 之后，React似乎将服务器的输出HTML字符串与将在客户端生成的字符串进行比较。

在大多数情况下，这些都是相同的，但在这种情况下，我有意想要不同的输出。实现这个的正确方法是什么？