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

时间:2018-10-02 17:35:00

标签: javascript reactjs jsx

我有这段代码(它来自更大的类,但是相关的部分在这里)

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

我收到此错误:

  

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

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

相关代码如下:

None

2 个答案:

答案 0 :(得分:0)

我们不能直接插入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>
    );
}

答案 1 :(得分:-2)

您的函数正在返回多个dom节点。将它们附加其他标签(div,span等),或使用片段:

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