Aquí está el código, no estoy seguro de si se trata de un problema con React o un simple error tipográfico, pero tan pronto como se muestra este componente, la etiqueta de estilo completa desaparece. Lo que hace este código es cambiar la escala de transformación cada 750 ms a un tamaño aleatorio entre 0 y 0,5, pero como se indicó, tiene un problema incluso al representar la etiqueta, lo cual es extraño.
let styles = { transform: `scale(0.5);` } function changeStyle() { var r = -0.1 + Math.random() * (0.2 - 0) + 0; styles = { transform: `scale(${r});` }; setTimeout(changeStyle, 750); } changeStyle(); export default class Runaway extends Component { componentDidMount() { console.log("Booting up Runaway button v1 by Ashe Muller.") } render() { return ( <div style={{styles}}> <text id="shopItemGrid">RUN AWAY</text> </div> ) } }La forma en que el código está estructurado ahora, los styles nunca cambiarían, porque changeStyle() nunca se llama dentro del componente.
Prueba algo como esto:
export default class Runaway extends Component { constructor() { super(); this.state = { transform: 'scale(0.5)' } } handleTransformChange = () => { var r = -0.1 + Math.random() * (0.2 - 0) + 0; var newTransform = `scale(${r})`; this.setState({ transform: newTransform }); } componentDidMount() { console.log("Booting up Runaway button v1 by Ashe Muller.") this.timer = setInterval( () => this.handleTransformChange(), 750 ); } componentWillUnmount() { clearInterval(this.timer); } render() { let styles = { transform: this.state.transform }; return ( <div style={styles}> <text id="shopItemGrid">RUN AWAY</text> </div> ); } }su let 'styles' ya es un objeto y debe pasarse como tal a su estilo div:
<div style={styles}>por lo que el resultado seria:
<div style={{ transform: `scale(0.5);` }}>En su caso, está agregando un nivel de objeto y finalmente su estilo se ve así:
style={{ styles : { transform: `scale(0.5);` }}que no es un estilo válido.