反应 - 如何添加反应DOM？

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

当我尝试

<body> 
    React.... 
    <div id="main_insert"> 
     <span> 
     </span> 
    </div> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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确实存在的成分，但不是菜，而是内容不见了

来源

2017-07-18 Michael Durrant

使用JSX我的朋友，因此内h1任何内容被通过，我们使内像这样的新元素替换。 –

看起来像UL在那里，它有一些东西在里面。你有没有尝试展开该节点？ –

是啊jsx但我没有先学习一点基础知识 –

请看看一本返工的例子 - 应该工作：

<body> 
    React.... 
    <div id="main_insert"> 
    <span> 
    </span> 
    </div> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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>

来源

2017-07-18 14:13:07