预期服务器 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>.

根据我的理解，hydratingReact 似乎将来自服务器的输出 HTML 字符串与将在客户端生成的字符串进行比较。

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