反應 - 如何添加反應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