參考的反應影像元素-有解無憂

我正在將應用程式從 jquery 轉換為做出反應，并且我正在處理一個Kjua QR 碼組件。我之前的代碼在 javascript 中創建了 Kjua 元素

const qrcode = kjua({
    text: target_url,
    render: 'svg',
    size: 200,
    mode: 'image',
    ecLevel: 'Q',
    mSize: 25,
    quiet: 2,
    image: document.getElementById("logo"),
});

這參考了'logo'DOM 中參考 SVG的影像。

將其轉換為反應，我發現Kjua-react包裝器可以在反應中使用該庫。在沒有影像覆寫的情況下設定它可以正常作業：

function QRCode() {
    const target_url = 'something';
    return <Kjua text={target_url} render="svg" size="200" ecLevel="Q" mSize="25" quiet="2"/>;
}

ReactDOM.render(<QRCode />, document.getElementById("root"));

但我不確定如何在 react 中參考 logo，并像下面這樣引入影像疊加層：

function QRCode() {
    const target_url = 'something';
    return <Kjua text={target_url} render="svg" size="200" ecLevel="Q" mSize="25" quiet="2" mode="image" image="document.getElementById('logo')"/>;
}

ReactDOM.render(<QRCode />, document.getElementById("root"));

給出以下錯誤：

Uncaught TypeError: t.getAttribute is not a function
The above error occurred in the <Kjua> component
Uncaught TypeError: t.getAttribute is not a function

你如何渲染影像或HTMLImageElement在反應組件中創建和參考它？

謝謝。

uj5u.com熱心網友回復：

有幾種方法：

第一個。通過道具將影像節點傳遞給目標組件

function QRCode({image}) {
    const target_url = 'something';
    return <Kjua text={target_url} render="svg" size="200" ecLevel="Q" mSize="25" quiet="2" mode="image" image={image}/>;
}

const image = document.getElementById('logo')
ReactDOM.render(<QRCode image={image}/>, document.getElementById("root"));

第二個。因為有時傳遞道具并不是那么簡單，您只需在反應組件本身中獲取對影像節點的參考

function QRCode() {
    const target_url = 'something';
    const [image, setImage] = useState(null);
    useEffect(() => {
        setImage(document.getElementById('logo'))
    }, [])
    return image ? <Kjua text={target_url} render="svg" size="200" ecLevel="Q" mSize="25" quiet="2" mode="image" image={image}/> : null;
}

ReactDOM.render(<QRCode/>, document.getElementById("root"));

第三個。如果你相信，當你呈現一個元素可以訪問DOM可以更換useEffect上useMemo獲得的影像同步

function QRCode() {
    const target_url = 'something';
    const image = useMemo(() => document.getElementById('logo'), [])
    return <Kjua text={target_url} render="svg" size="200" ecLevel="Q" mSize="25" quiet="2" mode="image" image={image}/>;
}

ReactDOM.render(<QRCode/>, document.getElementById("root"));

Ps 您傳遞給imageprop 字串的代碼中的問題和 react Kjua 后面的 kjua 代碼期望影像將是一個 DOM 元素，所以這就是您得到例外的原因。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406986.html

標籤：

上一篇：如何通過單擊按鈕來增加或減少頁面的字體大小

下一篇：為什么不回傳最后一個陣列值？