Question

我试图在React中创建一个在加载页面后淡入的元素。从调试我知道setState没有工作，因为我希望它工作。

const divHeight = 100;
const divWidth = 300;

class ProbaShell extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      h: divHeight,
      w: divWidth
    };

    this.fadeIn = this.fadeIn.bind(this);
  }

  fadeIn(){
    // alert('fadeInFunc');
    var divH = document.getElementById('kwadrat').clientHeight;

    while(divH <= 400){
      divH = divH + 5;
      this.setState({ h: divH });
      var sh = this.state.h;
    };
  }

  render(){
    return(
      <Proba style = {{height: this.state.h}}/>
    )
  }

  componentDidMount(){
    alert('fadeInCall');
    this.fadeIn();
  }
}

和第二部分：

import React from 'react';

class Proba extends React.Component{
  render(){
    return(
      <div ref = 'kwadrat' id = 'kwadrat'>
        {alert('kwadrat')}
      </div>
    )
  }
}

为什么我无法更新状态并更改div的大小？

Answer 1

您的代码中有三个问题：

while循环太快，您无法看到任何动作。为了解决这个问题，我在下面提出了setInterval解决方案。
您正在向style组件提供<Proba>，认为它是默认的HTML属性。它实际上只不过是道具，下面的解决方案也是如此。
您在道具定义的=标志周围放置空格，不建议这样做。

以下是Proba组件的render方法：

function render() {
    return (
        // set the style as a normal prop, it will work here because this
        // is a simple <div>, not a component
        <div ref="kwadrat" id="kwadrat" style={ this.props.style }>
            kwadrat
        </div>
    );
}

以下是fadeIn方法：

fadeIn() {
    const interval = setInterval(() => {
        this.setState({ h: (this.state.h + 5) });
        if (this.state.h >= 400) {
            clearInterval(interval);
        } 
    }, 50);
}

我添加了codepen，其中显示了一个工作示例，其中我为<div>（step和time的移动添加了两种不同的配置。

Answer 2

首先，我希望您为tipps提供优化代码：

使用箭头函数代替bind（）：

this.fadeIn = () => this.fadeIn();

在这种情况下，只需调用方法就足够了：

this.fadeIn();

您能否告诉我有关您想做什么以及组件结构如何（父/子）的更多信息。我永远不会在React App中使用document.getElementById ......

在React app

2 个答案: