componentDidMountから要素をスタイルする方法は？

Question

私はコンポーネントがあります。componentDidMountで

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> 
    ´ ) 
    } 

を、私はthumnailsの1を対象とし、それのスタイルを更新したい、私は私がこれをどのように行うことができ、サムネイルが持っているもののインデックスを知っていますか？あなたが直接あなたが行うことができ、すべてがその状態またはそのプロパティを変更され、コンポーネントが描画される方法を変更することはできません例えば

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

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

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

Answer 1

状態のいくつかのプロパティを設定し、それに応じてrenderメソッドでレンダリングします。それは、現在のインデックスにcomponentDidMountで

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

を一致させるためにあなたがサムネイルをレンダリングするとき

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

例えば-1にthumbnailIndexのような元の状態でプロパティを設定し

チェックにインデックスを設定します状態

Answer 2

を状態変数を使用すると、あなたが持っているであろうと行うことができます

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