反应状态与道具-为什么状态更改未反映在组件中？

Question

I'm trying to create a div that sits underneath the main app (lexically) but is styled to only show up after a timed delay. I feel like this is most likely a very simple failure on my part to grasp some of the react concepts I'm working with.

Here's my code: (The CSS is pseudo code)

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

So, my current understanding is that when the timeout fires the container state change should populate down to the children and override the display: none with display: block. That change never seems to happen although the state-change itself does happen.

What concept am I missing here?

Answer 1

When you use setState, you're setting the displayIcons variable in component's internal state which would be accessed by this.state.displayIcons .

If you look at your render, in the display prop, you're targeting this.props.displayIcons

You would only use props here if you were changing the displayIcons property in a parent component.

Change that to this.state.displayIcons and it should work as you expect.

Answer 2

I'm not sure what makes sense or not to your code.

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

Is setTimeout really a props function? It looks like that what you really want was to just call setTimeOut:

setTimeout(this.showIcons, 4000);

Why are you rendering 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 */}

I believe what you really want is to render the state that you changed on 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 */}

Hope that helps!