React类不渲染

Question

我正在尝试遵循reactjs tic tac toe教程，但是当我尝试呈现页面并且有此代码时

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Game from '../components/Game'
    document.addEventListener('DOMContentLoaded', () => {
        ReactDOM.render(
            console.log("render is working"),
            <Game />,
            document.getElementById('root'),
        );
    })

游戏类看起来像

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Board from './Board'

    class Game extends React.Component {
        render() {
            console.log("Hooray, the game is working")
            return (
                <div className="game">
                    <div className="game-board">
                        <Board />
                    </div>
                    <div className="game-info">
                        <div>{/* status */}</div>
                        <ol>{/* TODO */}</ol>
                    </div>
                </div>
            );
        }
    }

    export default Game

“渲染器正在向控制台打印输出，但是控制台日志中没有显示“万岁，游戏正在运行”，因此似乎出于某些原因未渲染Game类。 我正在使用内置webpacker的Rails在Rails上加载所有JavaScript

Answer 1

ReactDOM.render()有两个参数：component和mount DOM元素。 您正在为第一个参数传递console.log 。

Answer 2

导致调用console.log结果基本上是undefined ：

ReactDOM.render(
   undefined, // <- react component
   <Game />, // <- target 
   document.getElementById('root'), // < - useless
);

我很惊讶ReactDOM.render不会引发错误，尽管您正在向它传递完全无用的参数。

Answer 3

首先，为什么要在事件监听器中包装ReactDom.render(...) ？ 二，为什么要通过ReactDom.render(...)传递console.log() ？ 它应该仅包含两个参数：一个组件以及应该附加到其上的元素。 尝试删除console.log() ，如果仍然无效，请尝试删除包装了ReactDoom.render(...)的事件侦听器。

Answer 4

您需要从ReactDOM渲染调用中删除控制台日志。

如果需要在组件中渲染，则可以这样做。

<div>
  .....
  {console.log('Inline console in render method')}
</div>

Answer 5

您的渲染应如下所示：

ReactDOM.render(<Game />, document.getElementById('root);

假设您的子组件作为“导出默认游戏”传递，并且您的HTML基本文件的ID为“ root”。

渲染仅需要两个参数。 第一个是要传入的组件，第二个是应放置其自身的目标。 您只需要在“ index.js”文件中执行此步骤。 无处。