反應渲染不顯示任何東西

Question

我的反應codepen沒有顯示任何東西。

JS

class HelloWorld extends React.Component { 
    render() { 
     return (<div>Hello World!</div>); 
    } 
} 
var app = document.getElementById("mainapp"); 
React.render(<HelloWorld />, app); 

HTML

<div id='mainapp'></div> 

我進口的反應，ReactDOM海槽CDN。如果我在控制檯輸入React/ReactDOM，它會正確導入。此代碼不顯示任何錯誤，但我什麼都看不到。我在多個瀏覽器（chrome，firefox，icecat）上測試了這個，但仍然沒有結果......我使用bable是一個預處理器。

Answer 1

ReactDOM.render不是React.render。

class HelloWorld extends React.Component { 
 
    render() { 
 
     return <div>Hello World!</div>; 
 
    } 
 
} 
 
var app = document.getElementById("mainapp"); 
 
ReactDOM.render(
 
    <HelloWorld/>, 
 
    app 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script> 
 
<div id='mainapp'></div>

Answer 2

您的組件需要返回一個元素而不是裸體字符串。嘗試將其修改爲<div>Hello World!</div>

Answer 3

兩件事情

1. 你需要返回一個有效的反應元素
2. 使用ReactDOM.render，而不是React.render

片段

class HelloWorld extends React.Component { 
 
    render() { 
 
     return <div>"Hello World!"</div> 
 
    } 
 
} 
 
var app = document.getElementById("mainapp"); 
 
ReactDOM.render(<HelloWorld />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="mainapp"></div>

也可參閱爲什麼要使用ReactDOM

react vs react DOM confusion