Реактивный класс не рендеринг

Question

Я пытаюсь следовать учебному пособию "Реакция и крестики-нолики", но когда я пытаюсь отобразить страницы, у меня есть этот код

    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 по какой-то причине не рендерится. Я использую ruby ​​на рельсах со встроенным webpacker для загрузки всех javascripts

Answer 1

Во-первых, почему у вас есть ReactDom.render(...) завернутый в это событие слушатель? Во-вторых, почему вы передаете ReactDom.render(...) console.log()? Он должен принимать только два аргумента: компонент и элемент, к которому он должен быть добавлен. Попробуйте удалить console.log() и если это все еще не работает, попробуйте удалить прослушиватель событий, который оборачивает ваш ReactDoom.render(...),

Answer 2

ReactDOM.render() принимает 2 аргумента: компонент и монтирующий элемент DOM. Вы передаете console.log за первый аргумент.

Answer 3

Вызвать вызов console.log оценивает undefined вы в основном делаете:

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

Я удивлен, что ReactDOM.render не выдает ошибку, хотя вы передаете ей совершенно бесполезные аргументы.

Answer 4

Вам необходимо удалить консольный журнал из вызова рендеринга ReactDOM.

Если мне нужно визуализировать в компоненте, я могу сделать это как таковой.

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

Answer 5

Ваш рендер должен быть следующим:

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

Предполагая, что ваш дочерний компонент передается как "экспортировать игру по умолчанию", а ваш идентификатор вашего базового файла HTML равен "root".

Визуализация требует только двух аргументов. Первый - это передаваемый компонент, а второй - цель, в которую он должен поместить себя. Вам нужно только сделать этот шаг в вашем файле index.js. Нигде более.