Question

我有一个看起来像这样的组件：

const ProductCarousel = React.createClass({
  componentDidMount: function () {
    this.flky = new Flickity('.carousel', flickityOptions)
    //here
  },
  render: function () {
    const item = this.props.item
    return (
      <div>
        <div className='carousel'>
          {item.get('images').map((url, i) => (
            <img key={i.toString()} src={stripUrl(url)} width={520} />
          ))}
        </div>
        <div style={{marginTop: '20px', display: 'flex'}}>
          {item.get('images').map((url, index) =>
            <div style={{flexGrow: 1, margin: '0 1em 0 1em'}} className='hidden-xs' key={url}>
              <Thumbnail src={stripUrl(url)} />
            </div>
          )}
        </div>
      </div>
    )
  }
})

在这里说“这里”的地方，我想为<Thumbnail onClick />定义功能。 Theese函数是this.flky的方法，因此我无法在componentDidMount之前创建它们，但我想在缩略图中设置它们并将缩略图索引传递给它们。是否有类似我可以使用的承诺？

Answer 1

如果你把它放在一个函数中，它就不会被执行直到它被点击，然后方法应该存在：

 <Thumbnail src={stripUrl(url)} onClick={()=>this.flky.someMethod(index)} />

我可以设置尚未定义的onClickevents吗？

1 个答案: