javascript - React - 更改数据会更改 renderToStaticMarkup() 的输出但不会重绘

Question

我正在构建一个看起来有点像这样的 React 应用程序:

我正在使用 Flux 模式，所以我有一个包含我的数据的商店。顶级面板请求数据，创建适当的子组件并向下传递数据的子集。这是递归发生的，所以我可以无限嵌套这些组。

如您所见，它目前有效!我可以单击按钮添加一个新的国家，然后我得到一个新行。我可以单击按钮向英国添加一个新城市，然后我得到一个新行。但是，当我单击按钮向美国添加新城市时，没有任何反应。

我可以看到数据变化。

初始状态:

{
  "planet": {
    "name": "Earth",
    "countries": [
      {
        "name": "United Kingdom",
        "cities": [
          {
            "name": "London"
          },
          {
            "name": "Birmingham"
          }
        ]
      },
      {
        "name": "United States of America"
      }
    ]
  }
}

点击按钮将城市添加到美国后:

{
  "planet": {
    "name": "Earth",
    "countries": [
      {
        "name": "United Kingdom",
        "cities": [
          {
            "name": "London"
          },
          {
            "name": "Birmingham"
          }
        ]
      },
      {
        "name": "United States of America",
        "cities": [
          {

          }
        ]
      }
    ]
  }
}

我什至可以通过在子元素上调用 React.renderToStaticMarkup() 来检查 React 生成的实际标记是否发生变化。

这是之前美国行的标记:

<div data="[object Object]" draggable="true" data-index="1" class="panel__group__row">
    <div class="panel__field"><label for="planet|countries|1|name">Name</label><input type="text" name="planet|countries|1|name" value="United States of America"></div>
    <div class="panel__group">
        <h4>Cities</h4>
        <div data="[object Object]" draggable="false" class="panel__group__row"><a href="">Add +</a></div>
    </div>
</div>

及之后:

<div data="[object Object]" draggable="true" data-index="1" class="panel__group__row">
    <div class="panel__field"><label for="planet|countries|1|name">Name</label><input type="text" name="planet|countries|1|name" value="United States of America"></div>
    <div class="panel__group">
        <h4>Cities</h4>
        <div data="[object Object]" draggable="true" data-index="0" class="panel__group__row">
            <div class="panel__field"><label for="planet|countries|1|cities|0|name">Name</label><input type="text" name="planet|countries|1|cities|0|name"></div>
        </div>
        <div data="[object Object]" draggable="false" class="panel__group__row"><a href="">Add +</a></div>
    </div>
</div>

但是没有什么是不重绘的。我在这里遗漏了什么吗？

Answer 1

尝试使用 React.renderToString() 而不是 React.renderToStaticMarkup()，因为静态标记渲染不为 React 提供任何钩子(Hook)来渲染客户端以进行交互。