En nuestra aplicación, un fragmento de texto cambia el tamaño de fuente mediante una clase CSS con puntos de interrupción receptivos.
Pero algunos usuarios quieren un control preciso sobre el tamaño de la fuente, por lo que tenemos botones para "aumentar" y "disminuir" el tamaño de la fuente.
Usando React, tengo:
const [characterSize, setCharacterSize] = useState(45);y
function increaseCharacterSize() { setCharacterSize(characterSize + 1); } <div style={{ fontSize: `${characterSize}px` }} className="myClass" >Our awesome text</div> Llamar a increaseCharacterSize el tamaño de fuente como se esperaba.
El problema es que no quiero establecer el tamaño de carácter en "45" como en el ejemplo, porque el tamaño inicial (a partir del cual comenzar a incrementar/disminuir) depende del tamaño de fuente actual del elemento en el DOM (que se basa en la clase CSS que se basa en la ventana del navegador).
Necesito poder determinar el tamaño de fuente renderizado actual del elemento DOM. En javascript simple y sencillo, esto se vería así:
window.getComputedStyle(el, null).getPropertyValue('font-size');¿Hay alguna manera de hacer esto en React?
Obtenga la referencia y llame a la función deseada:
export default function App() { const inputRef = useRef(); useEffect(() => { const size = window .getComputedStyle(inputRef.current, null) .getPropertyValue("font-size"); console.log(size); }, []); return ( <div className="App"> <div ref={inputRef} style={{ fontSize: 45 }}> Our awesome text </div> </div> ); }https://codesandbox.io/s/cranky-tharp-ldexxr?file=/src/App.js:67-439
Creo que hay dos partes en esto:
como dice @super, simplemente puede usar javascript de vainilla en reaccionar.
¿Cuál es la razón por la que desea controlar el tamaño de fuente en el código de su aplicación?
Normalmente harías esto usando rem . Es una unidad de tamaño que puede usar en su CSS que se escalará automáticamente a medida que el usuario cambie la configuración del tamaño de fuente en el navegador. Entonces, básicamente, esta es una rueda que ya existe y quieres reinventar.