reactjs - 反应渲染不显示任何东西

Question

我的反应代码笔没有显示任何内容。

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

您的组件需要返回一个元素而不是一个裸字符串。尝试将其修改为<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

两件事情

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 与 react DOM 混淆