反应类不渲染答案

【问题标题】：React class not rendering反应类不渲染
【发布时间】：2019-03-02 22:54:15
【问题描述】：

我正在尝试跟随 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

'render is working 打印到控制台，但控制台日志显示“万岁，游戏正在运行”没有出现，所以看起来像由于某种原因，游戏类没有被渲染。我正在使用带有内置 webpacker 的 ruby on rails 来加载所有 javascripts

【问题讨论】：

为什么是 console.log ？！
注销。

标签： javascript ruby-on-rails reactjs webpacker

【解决方案1】：

因为调用console.log 计算结果为undefined 你基本上是在做：

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

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

【讨论】：

【解决方案2】：

ReactDOM.render() 有 2 个参数：组件和挂载 DOM 元素。您正在为第一个参数传递 console.log。

【讨论】：

【解决方案3】：

首先，您为什么将ReactDom.render(...) 包裹在该事件侦听器中？二，你为什么要通过ReactDom.render(...) 和console.log()？它应该只接受两个参数：一个组件，以及它应该附加到的元素。尝试删除console.log()，如果仍然不起作用，请尝试删除包含ReactDoom.render(...) 的事件侦听器。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

你的渲染应该如下：

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

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

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

【讨论】：