Question

我正在尝试遵循reactjs tic tac toe教程，但是当我尝试呈现页面并且我有这段代码

public partial class add_thing : Form
{
    public string piccpath1 { get; set; }
    public string piccpath2 { get; set; }
    public string description { get; set; }
    public string titlee { get; set; }

    public add_thing() => InitializeComponent();

    private void button1_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK) {
            string picPath = openFileDialog1.FileName;
            pictureBox1.Image = (Bitmap)Image.FromFile(picpath).Clone();
            string[] extract = Regex.Split(picpath, "evidence");
            string piPath2 = Regex.Replace(extract[1], "evidence", "");
            this.piccpath1 = picPath;
            this.piccpath2 = piPath2; 
        }
    }

    private void button3_Click(object sender, EventArgs e)
    {
        this.description = richTextBox1.Text;
        this.titlee = textBox1.Text;
        this.DialogResult = DialogResult.OK;
    }
}

和Game类看起来像


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

“渲染器正在向控制台打印”，但没有显示“万岁，游戏正在工作”的控制台日志，因此似乎由于某些原因，游戏类未得到渲染。我正在使用内置webpacker的rails在Ruby上加载所有javascripts

Answer 1

ReactDOM.render()接受2个参数：component和Mounting DOM element。您正在为第一个参数传递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);

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

渲染仅接受两个参数。第一个是要传入的组件，第二个是应放置其自身的目标。您只需要在“ index.js”文件中执行此步骤。没有别的地方。

React类不渲染

5 个答案: