反应渲染不显示任何东西

Question

我的 React 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>

我通过 cdn 导入了 React 和 ReactDOM。如果我在控制台中输入 React/ReactDOM，它就会被正确导入。这段代码没有显示任何错误，但我什么也没看到。我在多个浏览器（chrome、firefox、icecat）上对此进行了测试，但仍然没有结果...我正在使用 bable 是一个预处理器。

Answer 1

您的组件需要 return 一个元素而不是裸字符串。尝试修改为<div>Hello World!</div>

Answer 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.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 3

两件事

你需要return一个有效的反应元素
使用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 render doesn't show anything

reactjs

codepen