React类不渲染

Question

I'm trying to follow along with the reactjs tic tac toe tutorial, but when I try to render the pages and I have this code

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

and the Game class looks like

    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

The 'render is working prints to the console but the console log that says "Hooray, the game is working" doesn't show up, so it seems like the Game class isn't getting rendered for some reason. I'm using ruby on rails with the built in webpacker to load all the javascripts

Answer 1

ReactDOM.render() takes 2 arguments: component, and mounting DOM element. You are passing a console.log for the first argument.

Answer 2

Cause calling console.log evaluates to undefined you are basically doing:

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

I'm surprised that ReactDOM.render is not throwing an error although you are passing completely useless arguments to it.

Answer 3

For one, why do you have your ReactDom.render(...) wrapped in that event listener? Two, why are you passing the ReactDom.render(...) a console.log() ? It should only take two arguments: a component, and the element it should be appended to. Try removing the console.log() and if that still doesn't work, try removing the event listener that wraps your ReactDoom.render(...) .

Answer 4

You need to remove the console log from the ReactDOM render call.

If I need to render in a component, I can do it as such.

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

Answer 5

Your render should be as follows:

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

Assuming your child component is passed as 'export default Game' and your Id of your HTML base file is 'root'.

Render only takes two arguments. The first being the component being passed in and the second is the target in which it should place itself. You should only need to do this step at your 'index.js' file. Nowhere else.