React class 不渲染

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

游戏 class 看起来像

    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

'render is working 打印到控制台，但显示 "Hooray, the game is working" 的控制台日志没有显示，所以看起来出于某种原因，游戏 class 没有被渲染。我在 rails 上使用 ruby 和内置的 webpacker 来加载所有 javascripts

Answer 1

ReactDOM.render() 接受 2 个参数：组件和安装 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);

假设您的子组件作为 'export default Game' 传递并且您的 HTML 基础文件的 ID 是 'root'。

Render 只接受两个参数。第一个是传入的组件，第二个是它应该放置自己的目标。您应该只需要在 'index.js' 文件中执行此步骤。别无他处。

React class 不渲染

React class not rendering

javascript

ruby-on-rails

reactjs

webpacker