样式标签在渲染时从 ReactJS 组件中完全消失

Question

这是代码，不确定这是 React 的问题还是简单的拼写错误，但是一旦这个组件呈现，整个样式标签就会消失。这段代码所做的是每 750 毫秒将变换比例更改为 0 到 0.5 之间的随机大小，但如前所述，它甚至在渲染标签时也有问题，这很奇怪。

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>
        )
    }
}

Answer 1

你的 let 'styles' 已经是一个对象，应该传递给你的 div 样式：

<div style={styles}>

这样结果就是：

<div style={{ transform: `scale(0.5);` }}>

在你的例子中，你添加了一个层次的对象，最后你的风格看起来像这样：

style={{ styles : { transform: `scale(0.5);` }}

这不是有效的样式。

Answer 2

现在代码的结构方式，styles 永远不会改变，因为 changeStyle() 永远不会在组件中被调用。

尝试这样的事情：

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>
    );
  }
}

样式标签在渲染时从 ReactJS 组件中完全消失

style tag completely disappears from ReactJS component on render

javascript

inline-styles

reactjs