Question

我有这个问题，我正在尝试使用React渲染HTMLDivElement，但是我收到以下错误：

Uncaught Invariant Violation: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `VirtualList`

在我的React Component类中，我有这段代码......

import React, { Component } from 'react';

export default class VirtualList extends Component {

    constructor(props) {
        super(props);

        this.container = document.createElement('div');
    }

    renderList() {
        let container = this.container;

        // Manipulate container etc.

        return container;
    }

    render() {

        return (
            <div>
                {this.renderList()}
            </div>
        )
    }
}

非常感谢帮助！

Answer 1

DOCS:

ReactElements不要与DOM Elements混淆。

您可以通过React.createElement创建React元素。

this.container = React.createElement('div');

Answer 2

有点晚了，但我偶然发现了同样的问题。

您可以修改代码以创建对 div 的引用，然后可以将其视为普通的 HTML 元素。首先，创建div：

constructor(props) {
        super(props);

        this.container = document.createElement('div');
        this.reference = React.createRef();
    }

然后，您将引用添加到正确的 div：

render() {

        return (
            <div ref={this.reference}>
            </div>
        )
    }

你可以随时追加，但我会在组件挂载后进行：

componentDidMount()
{
    this.reference.current.appendChild(this.container());
}

请参阅 here 以了解具有功能组件的实现

在React中渲染HTMLDivElement

2 个答案: