反應狀態與道具-為什么狀態更改未反映在組件中？

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和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 */}

希望有幫助！