javascript - React State 与 Props - 为什么状态变化没有反射(reflect)在组件中？

Question

我正在尝试创建一个位于主应用程序下方(词汇上)的 div，但其样式设置为仅在定时延迟后显示。我觉得这很可能是我未能掌握我正在使用的一些 react 概念的一个非常简单的失败。

这是我的代码:(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: block 覆盖 display: none 。尽管状态变化本身确实发生了，但这种变化似乎永远不会发生。

我在这里缺少什么概念？

Answer 1

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

如果您查看渲染结果，在 display 属性中，您的目标是 this.props.displayIcons

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

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