reactjs - 如何为componentDidMount中的元素设置样式？

Question

我有一个组件：

  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 中，我希望定位其中一个缩略图并更新它的样式，我知道缩略图有什么索引，我该怎么做？

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

Answer 1

例如，您可以使用状态变量来做到这一点

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

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

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

Answer 2

您不能直接更改组件的渲染方式，您所能做的就是修改其状态或属性，您必须设置状态的某些属性并在render方法中相应地渲染。

将属性设置为原始状态thumbnailIndex，-1例如

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

当您渲染缩略图时，检查它是否与当前索引匹配

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

在componentDidMount状态下设置索引

this.setState({ thumbnailIndex: this.flky.selectedIndex });