ReactJS-简单幻灯片切换到父级

2个关注组件、幻灯片和控件

目标：

切换时，V形控件将更改“下一个”状态，并将该“下一个”值传递给父对象

父级将currentSlide状态更改为传递的下一个值

问题：

孩子的callbackParent道具正在返回一个值，但我似乎很难让家长读取它

幻灯片放映：

var slideData= [{....}]

export default class Slideshow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSlide: 0,
      data: []
    };
  }

  componentWillMount() {
    this.setState({ data: slideData });
  }

  handleClick(next) {
    this.setState({ currentSlide: next });
  }

  render() {
    const data = this.state.data;
    const currentSlide = this.state.currentSlide;
    return (
      <div className="slideshow">
        ...
        <Controls data={ data } currentSlide={ currentSlide } 
         callbackParent={ this.handleClick.bind(this, currentSlide) } />
      </div>
    );
  }
}

class Controls extends Component {

  ....

  toggleNext() {
    const current = this.state.currentSlide;
    let next = current + 1;
    if (next > this.props.data.length - 1) {
      next = 0;
    }
    this.props.callbackParent(this.setState({ currentSlide: next }));
  }

  togglePrev() {
     .....
  }

  render() {
    return (
      <div className="controls">
         ......
        <div className="toggle toggle--next"
          onClick={ this.toggleNext.bind(this, this.state.currentSlide) }
        >Next
        </div>
      </div>
    );
  }
}

var slideData=[{….}]
导出默认类幻灯片扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前幻灯片：0，
数据：[]
};
}
组件willmount（）{
this.setState（{data:slideData}）；
}
handleClick（下一个）{
this.setState（{currentSlide:next}）；
}
render（）{
const data=this.state.data；
const currentSlide=this.state.currentSlide；
返回(
...
);
}
}

---

控件：

var slideData= [{....}]

export default class Slideshow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSlide: 0,
      data: []
    };
  }

  componentWillMount() {
    this.setState({ data: slideData });
  }

  handleClick(next) {
    this.setState({ currentSlide: next });
  }

  render() {
    const data = this.state.data;
    const currentSlide = this.state.currentSlide;
    return (
      <div className="slideshow">
        ...
        <Controls data={ data } currentSlide={ currentSlide } 
         callbackParent={ this.handleClick.bind(this, currentSlide) } />
      </div>
    );
  }
}

class Controls extends Component {

  ....

  toggleNext() {
    const current = this.state.currentSlide;
    let next = current + 1;
    if (next > this.props.data.length - 1) {
      next = 0;
    }
    this.props.callbackParent(this.setState({ currentSlide: next }));
  }

  togglePrev() {
     .....
  }

  render() {
    return (
      <div className="controls">
         ......
        <div className="toggle toggle--next"
          onClick={ this.toggleNext.bind(this, this.state.currentSlide) }
        >Next
        </div>
      </div>
    );
  }
}

类控件扩展组件{
....
toggleNext（）{
const current=this.state.currentSlide；
让next=当前+1；
如果（下一步>this.props.data.length-1）{
next=0；
}
this.props.callbackParent（this.setState（{currentSlide:next}））；
}
togglePrev（）{
.....
}
render（）{
返回(
......
下一个
);
}
}

问题：

如何将子级返回的“next”值成功传递给父级

---

谢谢。

这里不是解释我在哪里犯了错误，而是完整的解决方案：

---

导出默认类幻灯片扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前幻灯片：0，
数据：[]
};
}
组件willmount（）{
this.setState（{data:slideData}）；
}
handleClick（下滑块）{
this.setState（{currentSlide:nextSlide}）；
}
render（）{
const data=this.state.data；
const currentSlide=this.state.currentSlide；
返回(
);
}
}

---

类幻灯片扩展组件{
建造师（道具）{
超级（道具）；
}
静态类型={
当前幻灯片：需要PropTypes.number.isRequired，
数据：需要PropTypes.array.isRequired
}
render（）{
const data=this.props.data；
const currside=this.props.currentsidel；
const slidesNodes=data.map（函数（slideNode，索引）{
const isActive=当前幻灯片===索引；
返回(
);
});
返回(
{slidesNodes}
);
}
}

---

类幻灯片扩展组件{
建造师（道具）{
超级（道具）；
}
静态类型={
操作：需要PropTypes.any.isRequired，
活动：PropTypes.bool.isRequired，
actionHref:PropTypes.any.isRequired，
imagePath:PropTypes.string.isRequired，
imageAlt:PropTypes.string.isRequired，
字幕：PropTypes.string.isRequired，
text:PropTypes.string.isRequired，
标题：PropTypes.string.isRequired
}
render（）{
const classes=this.props.active？'slide slide--active'：'slide'；
返回(
{this.props.title}
{this.props.subtitle}
{this.props.text}

);
}
}

---

类控件扩展组件{
建造师（道具）{
超级（道具）；
}
静态类型={
callbackParent:PropTypes.func.isRequired，
当前幻灯片：需要PropTypes.number.isRequired，
数据：需要PropTypes.array.isRequired
};
toggleNext（）{
const current=this.props.currentSlide；
const data=this.props.data；
让next=当前+1；
如果（下一步>data.length-1）{
next=0；
}
this.props.callbackParent（下一步）；
}
togglePrev（）{
const current=this.props.currentSlide；
const data=this.props.data；
设prev=当前值-1；
如果（上一个<0）{
prev=data.length-1；
}
this.props.callbackParent（prev）；
}
render（）{
返回(
上
下一个
);
}
}

---

类分页扩展组件{
建造师（道具）{
超级（道具）；
}
静态类型={
callbackParent:PropTypes.func.isRequired，
数据：需要PropTypes.array.isRequired
}
handleClick（slideNum）{
this.props.callbackParent（slideNum）
}
render（）{
const handleClick=this.handleClick.bind（this）；
const paginationNodes=this.props.data.map（函数（paginationNode，索引）{
返回(
);
});
返回(
{分页节点}
);
}
}

---

类寻呼机扩展组件{
建造师（道具）{
超级（道具）；
}
静态类型={
页面单击：需要PropTypes.func.isRequired，
id:PropTypes.any.isRequired，
标题：PropTypes.string.isRequiredv
};
切换幻灯片（）{
this.props.pagerClick（this.props.index）；
}
render（）{
返回(
{this.props.title}
);
}
}

这里不是解释我的错误，而是完整的解决方案：

---

导出默认类幻灯片扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前幻灯片：0，
数据：[]
};
}
组件willmount（）{
this.setState（{data:slideData}）；
}
handleClick（下滑块）{
this.setState（{currentSlide:nextSlide}）；
}
render（）{
const data=this.state.data；
const currentSlide=this.state.currentSlide；
返回(
);
}
}

---

类幻灯片扩展组件{
建造师（道具）{
超级（道具）；
}
静态类型={
当前幻灯片：需要PropTypes.number.isRequired，
数据：需要PropTypes.array.isRequired
}
render（）{
const data=this.props.data；
const currsidel=this.pro
class Slides extends Component {

  constructor(props) {
    super(props);
  }

  static propTypes = {
    currentSlide: PropTypes.number.isRequired,
    data: PropTypes.array.isRequired
  }

  render() {
    const data = this.props.data;
    const currSlide = this.props.currentSlide;
    const slidesNodes = data.map(function (slideNode, index) {
      const isActive = currSlide === index;
      return (
        <Slide active={ isActive } key={ slideNode.id }
          imagePath={ slideNode.imagePath } imageAlt={ slideNode.imageAlt }
          title={ slideNode.title } subtitle={ slideNode.subtitle }
          text={ slideNode.text } action={ slideNode.action }
          actionHref={ slideNode.actionHref }
        />
      );
    });
    return (
      <div className="slides">
        { slidesNodes }
      </div>
    );
  }
}

class Slide extends Component {

  constructor(props) {
    super(props);
  }

  static propTypes = {
    action: PropTypes.any.isRequired,
    active: PropTypes.bool.isRequired,
    actionHref: PropTypes.any.isRequired,
    imagePath: PropTypes.string.isRequired,
    imageAlt: PropTypes.string.isRequired,
    subtitle: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired
  }

  render() {
    const classes = this.props.active ? 'slide slide--active' : 'slide';
    return (
      <div className={ classes }>
        <img src={ this.props.imagePath } alt={ this.props.imageAlt }/>
        <h2>{ this.props.title }</h2>
        <h3>{ this.props.subtitle }</h3>
        <p>{ this.props.text }</p>
        <a href={ this.props.actionHref }>{ this.props.action }</a>
      </div>
    );
  }
}

class Controls extends Component {

  constructor(props) {
    super(props);
  }

  static propTypes = {
    callbackParent: PropTypes.func.isRequired,
    currentSlide: PropTypes.number.isRequired,
    data: PropTypes.array.isRequired
  };

  toggleNext() {
    const current = this.props.currentSlide;
    const data = this.props.data;
    let next = current + 1;
    if (next > data.length - 1) {
      next = 0;
    }
    this.props.callbackParent(next);
  }

  togglePrev() {
    const current = this.props.currentSlide;
    const data = this.props.data;
    let prev = current - 1;
    if (prev < 0) {
      prev = data.length - 1;
    }
    this.props.callbackParent(prev);
  }

  render() {
    return (
      <div className="controls">
        <div className="toggle toggle--prev" onClick={ this.togglePrev.bind(this) } >Prev</div>
        <div className="toggle toggle--next" onClick={ this.toggleNext.bind(this) } >Next</div>
      </div>
    );
  }
}

class Pagination extends Component {

  constructor(props) {
    super(props);
  }

  static propTypes = {
    callbackParent: PropTypes.func.isRequired,
    data: PropTypes.array.isRequired
  }

  handleClick(slideNum) {
    this.props.callbackParent(slideNum)
  }


  render() {
    const handleClick = this.handleClick.bind(this);
    const paginationNodes = this.props.data.map(function (paginationNode, index) {
      return (
        <Pager id={ paginationNode.id } key={ index }
               title={ paginationNode.title } index={ index }
               pagerClick={ handleClick }
        />
      );
    });
    return (
      <div className="pagination">
        { paginationNodes }
      </div>
    );
  }
}

class Pager extends Component {

  constructor(props) {
    super(props);
  }

  static propTypes = {
    pagerClick: PropTypes.func.isRequired,
    id: PropTypes.any.isRequired,
    title: PropTypes.string.isRequiredv
  };

  toggleSlide() {
    this.props.pagerClick(this.props.index);
  }

  render() {
    return (
      <span className="pager" onClick={ this.toggleSlide.bind(this) }>{ this.props.title }</span>
    );
  }
}