Question

我有这段代码（它来自更大的类，但是相关的部分在这里）

我想做的是获取一个具有我们从第三方获得的QR码的现有div（'＃qr'），并在进行一些检查后根据需要进行一些更改。

我收到此错误：

invariant.js：42未捕获（已承诺）错误：对象作为React子对象无效（找到：[object HTMLDivElement]）。如果您打算渲染孩子的集合，请改用数组或使用React附加组件中的createFragment（object）包装对象。检查...的渲染方法。

我正在寻找一种在我的react类中呈现对象HTMLDivElement的方法。

相关代码如下：

None

Answer 1

我们不能直接插入DOM元素，您可以使用ref属性获取对父元素的引用，并在componentDidMount之后插入节点

getQrCode() {
    const qrCodeElem = document.querySelector('#qr');

    const uri =  encodeURI('some specific url');

    if (qrCodeElem && qrCodeElem.childNodes.length === 0) {
        return new QRCode(qrCodeElem, {
            text: uri
        });
    }

    return qrCodeElem;
}

componentDidMount () {

  this.qrCodeContainer.appendChild(this.getQrCode());
}

render() {
    return (
        <div ref={node => this.qrCodeContainer = node}>
            <div id="qr"></div>
        </div>
    );
}

Answer 2

您的函数正在返回多个dom节点。将它们附加其他标签（div，span等），或使用片段：

<>{this.getQrCode()}</>

如何在我的react组件中呈现对象HTMLDivElement？

2 个答案: