Question

我想设计的API：

<Carousel>
  <CarouselItem><any arbitrary HTML here></CarouselItem>
  <CarouselItem><any arbitrary HTML here></CarouselItem>
  <CarouselItem><any arbitrary HTML here></CarouselItem>
</Carousel>

每个<CarouselItem/>应该有next按钮，因此，我的<CarouselItem/>渲染函数如下所示：

<div className="carousel-item">
  {this.props.children}
  <div onClick={this.nextSlide}>
    Next
  </div>
</div>

我的<Carousel/>组件的工作是一次只渲染1 CarouselItem，并在发生点击时跳转到下一个。

我可以渲染一个CarouselItem，但我无法将点击处理程序连接到CarouselItem内的Carousel

import React, { Component } from 'react'
import CarouselItem from './carousel-item'

class Carousel extends Component {
  constructor(props, context) {
    super(props, context)

    this.state = {
      currentIndex: -1,
      currentItem: null
    }

    this.activateSlideAtIndex = this.activateSlideAtIndex.bind(this)
  }

  findItemAtIndex(index) {
    return this.props.children.find((carouselItemComponent)=> carouselItemComponent.props.item.index === index)
  }

  componentWillMount() {
    this.activateSlideAtIndex(this.state.currentIndex)
  }

  activateSlideAtIndex(index) {
    let newCarouselItemComponent = this.findItemAtIndex(index+1)
    if (newCarouselItemComponent) {
      newCarouselItemComponent.props.onClick = this.activateSlideAtIndex
     //Complains here that Cannot assign to read only property 'onClick' of object '#<Object>'
      this.setState({
        currentIndex: index+1,
        currentItem: newCarouselItemComponent
      })
    }
  }

  render() {
    return (
      <div className="carousel">
        {this.state.currentItem}
      </div>
    )
  }
}

export default Carousel

我知道我无法覆盖子组件的props。我怎么能达到我想要的呢？感谢所有帮助。

Answer 1

我不会将整个选定的组件存储在状态中，我会存储所选的索引，然后根据它进行渲染。类似的东西：

render() {
  <div>
    {this.props.children[this.state.currentIndex]}
  </div>
}

hm但是在添加到那些孩子的道具方面......看起来this article讨论了它。

React中的简单轮播组件

1 个答案: