0

コンポーネントがあります：

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

componentDidMount で、サムネイルの 1 つをターゲットにして、そのスタイルを更新したいのですが、サムネイルのインデックスはわかっていますが、どうすればよいですか?

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

2 に答える 2

2

たとえば、状態変数を使用してそれを行うことができます

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

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

// render 
<View style={ this.state.mounted ? styles.style1 : styles.style2 ></View>
于 2016-12-21T21:45:39.537 に答える
0

コンポーネントのレンダリング方法を直接変更することはできません。できることは、その状態またはそのプロパティを変更することだけです。状態のプロパティを設定し、それに応じてrenderメソッドでレンダリングする必要があります。

たとえば、プロパティを元の状態に設定しthumbnailIndexます-1

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

サムネイルをレンダリングするときに、現在のインデックスと一致することを確認します

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

componentDidMount状態でインデックスを設定する

this.setState({ thumbnailIndex: this.flky.selectedIndex });
于 2016-12-21T21:46:44.633 に答える