引用React图像元素

Question

我正在将一个应用程序从jquery转换为react，我正在处理一个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"),
});

这引用了DOM中引用SVG的'logo'图像。

将其转换为react，我找到了Kjua react包装器来使用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中引用徽标，并介绍如下图像覆盖：

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

如何在react组件中渲染图像或创建HTMLImageElement和引用？

谢谢。

Answer 1

有几种方法：

第一个。将图像节点通过道具传递到目标组件

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，则可以在useMemo上替换useEffect以同步获取图像

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"));

附言：您传递给imageprop字符串的代码和react kjua后面的kjua代码中的问题是，该图像将是一个DOM元素，所以这就是您得到异常的原因。