Wie style Elemente von ComponentDidMount?

Question

Ich habe eine Komponente:

render: function() { 
    const item = this.props.item 
    return (
      <div style={{marginTop: '20px', display: 'flex'}}> 
       {item.get('images').map((url, i) => 
        <Thumbnail href='#' src={stripUrl(url)} onClick={() => this.flky.select(i)} /> 
    ´   )} 
      </div> 
    ´ ) 
    } 

In componentDidMount möchte ich eine der thumnails Ziel und seinen Stil zu aktualisieren, ich weiß, was Index der Miniatur hat, wie kann ich das tun?

componentDidMount: function() { 
    this.flky = new Flickity('.carousel', flickityOptions) 
    this.flky.on('select',() => { 
     console.log('Flickity settled at ' + this.flky.selectedIndex) 
    }) 
    } 

Answer 1

Sie können tun, dass zum Beispiel Zustandsvariablen mit

// constructor 
this.state = { mounted: false }; 

// componentDidMount 
this.setState({ mounted: true }); 

// render 
<View style={ this.state.mounted ? styles.style1 : styles.style2 ></View> 

Answer 2

Sie können nicht direkt ändern, wie die Komponente gerendert wird, alles, was Sie tun können, ist sein Zustand oder seine Eigenschaften ändern, müssten Sie um eine Eigenschaft des Staates zu setzen und entsprechend in der render Methode zu rendern.

eine Eigenschaft im Originalzustand wie thumbnailIndex zu -1 zum Beispiel

getInitialState: function() { 
    return { 
    thumbnailIndex: -1 
    }; 
} 

Set

Wenn Sie die Vorschaubilder prüfen machen für den aktuellen Index in den Index gesetzt

<Thumbnail 
    href='#' 
    style={this.state.thumbnailIndex === i ? { ...styles... } : undefined} 
    ... 
/> 

Auf componentDidMount passen der Zustand