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

两件事

您需要返回有效的反应元素
使用ReactDOM.render代替React.render

片段

＆＃13;

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

＆＃13;

<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>

＆＃13;

另请参阅此答案，说明为何使用ReactDOM

here

反应渲染没有显示任何东西

3 个答案: