Question

我有一个已创建的组件，该组件使用对象数组并填充位于状态中的结果。这是一个轮播，根据存在的数据显示箭头，所以这就是我要通过状态执行此操作的原因。（我将包括完整的代码，以便您查看）。

现在，我希望将此轮播用于不同的页面，并希望动态地从每个页面提取数据。我知道我可以通过道具来做到这一点，但是我不确定如何重组当前组件以实现此目的。

如何将数据传递到其他页面上的props并将其添加到此处的状态内？

class Carousel extends Component {
  constructor(props) {
      super(props);

      this.state = {
          items:  [
            {name: 'First Name', city: 'City'},
            {name: 'First Name2', city: 'City2'},
            {name: 'First Name3', city: 'City3'}
          ],
          active: 1,
          direction: ''
      };
      this.rightClick = this.moveRight.bind(this);
      this.leftClick = this.moveLeft.bind(this);
      this.setActive = this.setActive.bind(this);
  }

  renderSlides(item, index) {

      let position;
      const {active} = this.state;

      if (active === index) {
          position = `${styles.active}`;
      } else if (active === index + 1) {
          position = `${styles.prev}`;
      } else if (active === index - 1) {
          position = `${styles.next}`;
      } else if (active > index) {
          position = `${styles.left}`;
      } else if (active < index) {
          position = `${styles.right}`;
      }

    return (

             <div>
                    <div className={styles.SliderItem__name}>
                       - {item.name}, {item.city} {item.state}
                    </div>

             </div>
    );

  }

  renderSliderNav() {
      const slides = this.state.items;
      const active = this.state.active;

      return slides.map((slide, index) => (
          <a onClick={() => this.setActive(index)}
             key={index}
             className={classnames({[styles.active]: active === index})}>
            <li className={classnames(styles.LessonSlide__navDot, {[styles.active]: active === index})}></li>
          </a>
      ));
  };

  setActive(selected) {
      const direction = selected > this.state.active ? 'right' : 'left';

      this.setState({
          active: selected,
          direction: direction
      });
  }

  moveLeft() {
      const newActive = this.state.active - 1;

      if (this.state.active + 1 === 1) {
          return;
      }

      this.setState({
          active: newActive < 0 ? this.state.items.length - 1 : newActive,
          direction: 'left'
      });
  }

  moveRight() {
      const newActive = this.state.active;

      if (this.state.active + 1 === this.state.items.length) {
          return;
      }

      this.setState({
          active: (newActive + 1) % this.state.items.length,
          direction: 'right'
      });

  }


  render() {
      const items = this.state.items;

      if (!items || items.length === 0) {
          return null;
      }

      return (
          <div className={styles.LessonSlider}>
                <div className={styles.SliderItem__wrapper}>
                  <div className={styles.SliderItem__container}>
                    <h3>Results</h3>
                      <div className={`${styles.LessonSlider__container} ${styles.noselect}`}>
                          {this.state.active + 1 !== 1
                              && <button className={`${styles.LessonSlider__button} ${styles.LessonSlider__button__prev}`} onClick={this.leftClick} />}
                              {this.state.items.map((item, index) => this.renderSlides(item, index))}
                          {this.state.active + 1 !== this.state.items.length
                              && <div className={`${styles.LessonSlider__button} ${styles.LessonSlider__button__next}`}
                              onClick={this.rightClick} />}
                      </div>
                      <div>
                        <ul className={`${styles.LessonSlide__nav} ${styles.noselect} ${this.props.colourScheme}`}>
                          {this.renderSliderNav()}
                        </ul>
                      </div>

                  </div>
                </div>

          </div>
      );
  }
}

export default Carousel;

Answer 1

在我看来，您希望能够从这样的其他页面致电Carousel

<Carousel items=[{name: 'First Name', city: 'City'}] />

您可以使用Carousel在props.items中访问

解决方案

constructor(props) {
    super(props);
    this.state = {
      items: props.items
    }
}

您还可以像这样将所有道具置入状态；但是，这样做可能会带来意想不到的后果，因此不建议这样做。

constructor(props) {
    super(props);
    this.state = {
      ...props
    }
}

文档

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

如何将道具传递到React组件中的状态

1 个答案:

解决方案

文档