javascript - 在反应中将方法从一个组件转移到另一个组件

Question

是否有一个主要组件，其中有一个 gotoFirst 方法返回到滑块的开头，这个方法如何附加到另一个组件的按钮（在我的情况下是 Opened 组件）？规定了 ，但结果是在这个组件中出现了一个工作按钮，并且在 Opened 中的那个按钮在单击时会出错

主要.tsx;

class MainSliderComponent extends Component<any, any> {
  slider: any;
  constructor(props: any) {
    super(props);
    this.state = {
      slideIndex: 0,
    };
  }
  goToFirst = () => {
    this.slider.slickGoTo(this.state.slideIndex);
  };
  render() {
    let settings = {
      infinite: false,
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 3,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3,
          },
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '50px',
            slidesToShow: 1,
          },
        },
      ],
    };

    return (
      <div className="container">
        <Opened {...this.props} goToFirst={this.goToFirst} />
        <button onClick={this.goToFirst} value={this.state.slideIndex} />
        <Slider ref={(slider) => (this.slider = slider)} {...settings}>
          {RoomsService.rooms.map((room) => {
            return (
              <div className="rooms_slider">
                <Link to={`/rooms/${room.id}`}>
                  <img src={room.img} />
                </Link>
              </div>
            );
          })}
        </Slider>
      </div>
    );
  }
}

Children.tsx;
class Opened extends Component<any, any> {
  render() {
    return (
      <div className="Opened">
        <button
          className="opened_button"
          onClick={() => {
            this.props.goToFirst();
          }}
        >
          Открыты
        </button>
      </div>
    );
  }
}

标签： javascriptreactjstypescript