javascript - 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'),
        );
    })

Game 类看起来像

    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

“渲染正在工作”打印到控制台，但控制台日志中没有显示“万岁，游戏正在工作”，所以看起来像由于某种原因，游戏类没有被渲染。我使用 ruby​​ on Rails 和内置的 webpacker 来加载所有 javascript

Answer 1

因为调用 console.log 的计算结果为 undefined 你基本上正在做:

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

我很惊讶 ReactDOM.render 没有抛出错误，尽管您向它传递了完全无用的参数。