Para mostrar los valores de látex matemático, estoy usando react-hook-mathjax .
Funciona perfectamente cuando paso un valor de látex directo al componente Tex2SVG. Tomar un valor de una variable y luego asignarlo a Tex2SVG no funciona.
Aquí está el enlace a codesanbox-https://codesandbox.io/s/nervous-breeze-pq7bhk?file=/src/App.js
import "./styles.css"; import Tex2SVG from "react-hook-mathjax"; export default function App() { const latex = "x = {-b pm sqrt{b^2-4ac} over 2a}"; return ( <div className="App"> {/* This works fine */} <Tex2SVG display="inline" latex="x = {-b \pm \sqrt{b^2-4ac} \over 2a}" /> <br /> {/* Not working with dynamic value */} <Tex2SVG display="inline" latex={latex} /> </div> ); }¿Podría alguien guiarme a través del proceso de ejecución de valores dinámicos? Necesito pasar valores dinámicos. PD: Verifiqué dos veces que en la biblioteca los valores del código pasan correctamente, pero no estoy seguro de si hay algo más que me falta.
La cadena que proporciona en la variable no tiene el mismo contenido que el literal, ¿quizás debería asegurarse de que sean iguales? Funciona si lo cambias a:
let latex = "x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}"; Si no puede lograr lo que desea en términos de actualizaciones dinámicas, puedo sugerirle usar better-react-mathjax que escribí. Allí, el componente MathJax escribe su contenido cada vez que se monta un componente. Lo siguiente logra lo mismo que arriba con salida SVG y elementos en línea:
import "./styles.css"; import React, { useState } from "react"; import { MathJax, MathJaxContext } from "better-react-mathjax"; export default function App() { const [latex, setLatex] = useState( "$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$" ); const config = { tex: { inlineMath: [["$", "$"]], displayMath: [["$$", "$$"]] } }; return ( <MathJaxContext config={config} src={"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"} > <div className="App"> <MathJax inline>{"$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$"}</MathJax> <br /> <MathJax inline>{latex}</MathJax> </div> </MathJaxContext> ); } Si TAMBIÉN proporciona el indicador dynamic , puede actualizar el contenido después del montaje y el contenido se volverá a escribir:
<div className="App"> { /* Will NOT typeset again when the button is clicked */ } <MathJax inline dynamic={false}>{latex}</MathJax> <br /> { /* Will typeset again when the button is clicked */ } <MathJax inline dynamic>{latex}</MathJax> <br /> <button onClick={() => setLatex("$\\sqrt{10^4}$")}>Update math</button> </div>Finalmente, también podría proporcionar todo el contenido en un solo componente:
<MathJax dynamic> <span>{"$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$"}</span> <br /> <span>{ latex }</span> </MathJax>Tiene un estilo un poco diferente al de la biblioteca que está usando actualmente, no sé cuál prefiere.
Aquí hay un sandbox con el que puedes jugar: Sandbox