Question

我第一次使用React，我无法让这个简单的事情发挥作用。

我需要做的是将一个h1元素添加到id为＆＃39; app＆＃39;的div中。但我的浏览器页面上没有显示任何内容。服务器端和客户端控制台都没有错误。在我在if语句中包装ReactDOM.render（）之前，发生了以下错误：

ReferenceError: document is not defined

我想在不使用JSX的情况下这样做，因为直到后来课程才涵盖这一点。

app.js

var React = require('react');
var ReactDOM = require('react-dom');

class Clock extends React.Component {
    render() {
        return React.createElement('h1', null, `Hello ${this.props.toWhat}`);
    }
}

if (typeof window !== 'undefined') {
    ReactDOM.render(
        React.createElement(Clock, {toWhat: 'World'}, null),
        document.getElementById('app')
    );
}

的index.html

<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>

<script>
    console.log(React);
    console.log(ReactDOM);
</script>

<div id="app"></div>

Answer 1

尝试了两个评论者建议的不同设置，确实解决了这个问题。我发现以下内容并且有效： Github - Create React App

创建新项目（mac终端）：

npx create-react-app my-app

React：ReactDOM.render（）不呈现任何内容

1 个答案: