ReactJS组件渲染时style标签完全消失问题咨询

• style属性传值格式错误：React内联style要求接收单层键值对对象，你写的style={{styles}}等价于style={ { styles: yourStylesObject } }，嵌套了一层多余的对象，React无法识别其中的样式规则，导致最终渲染的元素没有生效样式，看起来就像style标签消失。
• 外部变量修改无法触发重渲染：你把styles定义为组件外部的普通变量，直接修改这个变量不会触发React组件的render逻辑，就算样式传值格式正确，也看不到动态更新效果。
• transform值带多余分号：React内联样式的属性值不需要加CSS规则结尾的分号，多余的分号会导致样式解析失败。
• 随机数计算逻辑错误：当前的随机数公式计算出的范围是-0.1_{0.1，不符合你要求的0}0.5的取值范围。
• 非法HTML标签使用：div内直接使用<text>标签是错误的，<text>是SVG专属标签，普通HTML文档中使用不会被正常渲染，应该替换为span、p等常规文本标签。

import { Component } from 'react';

export default class Runaway extends Component {
    // 把样式值存在state中，修改state会自动触发组件重渲染
    state = {
        transform: 'scale(0.5)'
    }

    changeStyle = () => {
        // 计算0~0.5之间的随机数
        const r = Math.random() * 0.5;
        this.setState({
            transform: `scale(${r})`
        });
        // 存储定时器id，后续卸载时清除
        this.timer = setTimeout(this.changeStyle, 750);
    }

    componentDidMount() {
        console.log("Booting up Runaway button v1 by Ashe Muller.")
        this.changeStyle();
    }

    componentWillUnmount() {
        // 组件卸载时清除定时器，避免内存泄漏
        clearTimeout(this.timer);
    }

    render() {
        return (
            // 直接传入单层结构的样式对象
            <div style={{ transform: this.state.transform }}>
                <span id="shopItemGrid">RUN AWAY</span>
            </div>
        )
    }
}

内容的提问来源于stack exchange，提问作者Ashe Muller