反应渲染不显示任何东西

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