Question

新手

我可以创建一个元素但是如何添加到该元素？

当我尝试

时

  <body>
    React....
    <div id="main_insert">
      <span>
      </span>
    </div>
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>    <script>
      let dish = React.createElement("h1", {id: 'top'}, "Baked Salmon");
      let ingredients = React.createElement("ul", {id: 'mainList'},
        React.createElement("li", null, "eggs"),
        React.createElement("li", null, "ham"),
        React.createElement("li", null, "spam")
      );

      ReactDOM.render(dish, document.getElementById('main_insert'));
      ReactDOM.render(ingredients,  document.getElementById('top'));
      // react and js code here
    </script>
  </body>

我得到的是成分而不是菜肴

我的H1确实存在，但内容消失了

Answer 1

请看一下这个重做的例子 - 应该工作：

<body>
  React....
  <div id="main_insert">
    <span>
    </span>
  </div>
  <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>    
  <script>

    let ingredients = React.createElement("ul", {id: 'mainList'},
      React.createElement("li", null, "eggs"),
      React.createElement("li", null, "ham"),
      React.createElement("li", null, "spam"));

    let dish = React.createElement("h1", {id: 'top'},
     "Baked Salmon",
     ingredients);

    ReactDOM.render(dish, document.getElementById('main_insert'));
    // react and js code here

  </script>
</body>

Answer 2

注意：这是对问题的更多分析，@ Piotr已经提供了一种解决方法。

来自Reacts Website

ReactDOM.render()控制您传递的容器节点的内容 in。当第一次调用
时，里面的任何现有DOM元素都会被替换

让我们现在看一下行动的顺序：

1）调用代码的render方法（均已注释）：

在这里，我们可以看到正在显示子span标记。

2）现在，我们调用方法ReactDOM.render(dish, document.getElementById('main_insert')); 这应该在替换现有子元素时插入h1元素。

正如预期的那样，子span标记会被我们创建的h1替换。

3）同样，现在当我们调用ReactDOM.render(ingredients, document.getElementById('top'));时，我们的新容器节点是h1标记。因此，h1中的任何内容都会被我们在其中呈现的新元素替换为：

反应 - 如何添加反应DOM？

2 个答案: