直接来自文档:https ://www.npmjs.com/package/react-qr-svg
您无需将其放入图像标签中。
我的假设是这个库输出<svg> ... </svg>
(即直接输出的有效 HTML 标记)
您可以直接输出标签/元素吗?
import React from "react";
import { QRCode } from "react-qr-svg";
class Demo extends React.Component {
render() {
return (
<QRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 256 }}
value="some text"
/>
);
}
}
更新
如果我理解正确,我们不能简单地<svg>...</svg>
在页面上输出,因为库@react-pdf/renderer不适用于 svg 标签。所以我建议我们将 svg 序列化为 base-64 字符串,将其分配给图像标签的 src,然后它应该可以工作。
我把一个没有库的简化演示放在一起:https ://codepen.io/Alexander9111/pen/QWweYXO
HTML(简体):
<svg>
<ellipse class="ground" fill="##787f6a" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" fill="#94d31b" d="M210.333,65.331C104.367,...,203.01z"/>
</svg>
<div id="target">
<!-- place to put our img tag -->
</div>
JS:
const svg = document.querySelector("svg");
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = document.createElement("img")
img.src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
const target = document.querySelector("#target");
target.appendChild(img);
svg.parentNode.removeChild(svg);
现在,如果我们想在 React 中这样做,我假设我们可以这样做:
import React from "react";
import { QRCode } from "react-qr-svg";
class Demo extends React.Component {
render() {
const svg = function {
return (<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>);
};
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img_src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
return (
<img src={ img_src }/>
);
}
}
或者我们可以使用生命周期钩子来做到这一点,例如componentDidMount()
import React from "react";
import { QRCode } from "react-qr-svg";
class Demo extends React.Component {
componentDidMount() {
const div = this.refs.target;
const svg = div.querySelector("svg");
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = this.refs.img;
img.src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
svg.parentNode.removeChild(svg);
}
render() {
return (<div ref="target">
<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>
<img ref="img"/>
</div>
)
}
}
更新- 我让它在 CodePen 上的 React 中工作:https ://codepen.io/Alexander9111/pen/GRJKQQK
HTML:<div id="root"></div>
CSS:svg{border: 2px solid black;} img{border: 2px solid blue;}
反应 JS:
class Demo extends React.Component {
componentDidMount() {
const div = this.refs.target;
const svg = div.querySelector("svg");
console.log(svg);
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = this.refs.img;
console.log(img);
img.src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
svg.parentNode.removeChild(svg);
}
render() {
return (
<div ref="target">
<svg width="400" height="400">
<circle r="100" cx="200" cy="200" fill="red" />
</svg>
<img ref="img"/>
</div>
);
}
}
ReactDOM.render(
<Demo/>,
document.getElementById('root')
);