Estoy convirtiendo una aplicación de jquery para reaccionar y tengo un componente de código QR de Kjua en el que estoy trabajando. Mi código anterior crea el elemento Kjua en javascript
const qrcode = kjua({ text: target_url, render: 'svg', size: 200, mode: 'image', ecLevel: 'Q', mSize: 25, quiet: 2, image: document.getElementById("logo"), }); Esto hace referencia a una imagen de 'logo' en el DOM que hace referencia a un SVG.
al convertir esto para reaccionar, encontré el envoltorio Kjua-react para usar la biblioteca dentro de reaccionar. Configurar esto sin la superposición de imágenes funciona bien:
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"));Pero no estoy seguro de cómo hacer referencia al logotipo dentro de reaccionar e introducir la superposición de imágenes como la siguiente:
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"));Da el siguiente error:
Uncaught TypeError: t.getAttribute is not a function The above error occurred in the <Kjua> component Uncaught TypeError: t.getAttribute is not a function ¿Cómo renderizas la imagen o creas un HTMLImageElement y haces referencia a eso dentro de un componente de reacción?
Gracias.
Hay varias formas:
el primero Pase el nodo de imagen a través de los accesorios al componente de destino
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"));el segundo Debido a que a veces no es tan trivial pasar un accesorio, solo puede obtener una referencia al nodo de imagen dentro del componente de reacción.
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")); el tercero Si está seguro de que cuando procesa un elemento tiene acceso a DOM, puede reemplazar useEffect en useMemo para obtener la imagen sincrónicamente
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")); PD: el problema en su código que pasa a la cadena de accesorios de image y al código kjua detrás de reaccionar Kjua espera que la imagen sea un elemento DOM, por lo que es por eso que obtiene una excepción.