Question

我正在尝试创建一个位于主应用程序（词法）下方的div，但其样式仅在定时延迟后显示。我觉得这很可能是一个非常简单的失败，因为我无法掌握我正在使用的一些反应概念。

这是我的代码:( CSS是伪代码）

import React, {Component} from 'React'; //eslint-disable-line
import styled from 'styled-components';
import ReactTimeout from 'react-timeout';

const Icon = styled.div.attrs({
  dataRight: props => props.dataRight || '1em',
  dataLeft: props => props.dataLeft || '1em',
  displayIcons: props => props.displayIcons|| 'none'

})`
    display: ${props => props.displayIcons};
    font-size: 1.5rem;
    background-color: rebeccapurple;
    position: absolute;
    top: 1rem;
    right: ${props => props.dataRight};
    left: ${props => props.dataLeft};
`;



class Iconset extends Component {

  constructor(props) {
    super(props);
    this.state = {
      displayIcons: 'none'
    };
  }

  componentDidMount () {
    this.props.setTimeout(this.showIcons, 4000);
    alert('Display Icons =  ' + this.state.displayIcons);
  }

  showIcons() {  
    this.setState({displayIcons: 'Block'}); 
    alert('Display Icons =  ' + this.state.displayIcons);
  }   

  render () {
    return ( 
      <div id='iconset'>
        <Icon dataLeft="auto" dataRight="1em" display={this.props.displayIcons}>First Icon</Icon> {/*eslint-disable-line */}
        <Icon dataLeft="1em" dataRight="auto" display={this.props.displayIcons}>Second Icon</Icon> {/*eslint-disable-line */}
      </div>
    );
  }
}
export default ReactTimeout(Iconset);

因此，我目前的理解是，当超时触发容器时，状态更改应填充到子级并覆盖display：none with display：block。尽管状态变化确实发生了，但这种变化似乎永远不会发生。

我在这里错过了什么概念？

Answer 1

当您使用setState时，您将在组件的内部状态中设置displayIcons变量，该变量将由this.state.displayIcons访问。

如果您查看渲染，请在展示道具中定位this.props.displayIcons

如果要更改父组件中的displayIcons属性，则只能在此处使用props。

将其更改为this.state.displayIcons，它应该按预期工作。

Answer 2

我不确定你的代码是否有意义。

this.props.setTimeout(this.showIcons, 4000);

setTimeout真的是道具功能吗？看起来你真正想要的只是调用setTimeOut：

setTimeout(this.showIcons, 4000);

为什么要渲染props.displayIcons？

<Icon dataLeft="auto" dataRight="1em" display={this.props.displayIcons}>First Icon</Icon> {/*eslint-disable-line */}
<Icon dataLeft="1em" dataRight="auto" display={this.props.displayIcons}>Second Icon</Icon> {/*eslint-disable-line */}

我相信你真正想要的是渲染你在timeOut上改变的状态：

<Icon dataLeft="auto" dataRight="1em" display={this.state.displayIcons}>First Icon</Icon> {/*eslint-disable-line */}
<Icon dataLeft="1em" dataRight="auto" display={this.state.displayIcons}>Second Icon</Icon> {/*eslint-disable-line */}

希望有所帮助！

React State vs. Props - 为什么状态更改未反映在组件中？

2 个答案: