reactjs - 这个反应 onClick 不起作用是这个路由器链接错了吗？

问题描述

我学习 React 并想开始react-router-dom工作，但代码有问题

基本上我点击了这里的图片：

onImageClick = val => {
   return(
    <Link
    to={{
      pathname: "/timeLineViewer",
      productdetailProps: {
       productdetail: {val.week }
      }
      }}>
     </Link>
     )
  };

但是Link应该调用TimeLineViewer构造函数但它不起作用

这是应用程序

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import TimeLineViewer from './components/sections/TimeLineViewer'

class App extends Component {

  render() {
    return (
      <Router>
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
      <Switch>
        <Route path="/timeLineViewer">
          <TimeLineViewer />
        </Route>
      </Switch>
    </Router>
    );
  }
}

export default App;

请建议我是 React 新手

更新这是具有onImageClick

//import Timeline from "../elements/Timeline";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import React, { Component } from "react";
import Resume from "../../resume.json";
import TimeLineViewer from "./TimeLineViewer"
import { Link } from 'react-router-dom'

export default class Timeline extends React.Component {

    constructor(props) {
        super(props)
        this.changeHandler = this.changeHandler.bind(this)
        this.changeSlider = this.changeSlider.bind(this)
        this.state = {
            slideIndex: 0,
            updateCount: 0,
            settings: {
                dots: false,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1,
                afterChange: () =>
                    this.setState(state => ({ updateCount: state.updateCount + 1 })),
                beforeChange: (current, next) => this.setState({ slideIndex: next })
            }
        }
    }

    changeHandler(e) {
        this.sliderWrapper.slider.slickGoTo(e.target.value)
    }

    changeSlider() {
        this.setState({
            slideIndex: this.sliderWrapper.slider.innerSlider.state.currentSlide
        })
    }

    changeUpdateCount(e) {
        this.setState({
            updateCount: this.state.updateCount + 1
        }, () => console.log(`test state after update: ${this.state.updateCount}`))
    }

    onImageClick = val => {
       // TimeLineViewer={val.week}
       return(
        <Link
        to={{
          pathname: "/timeLineViewer",
          productdetailProps: {
           productdetail: "I M passed From Props"
          }
       }}>
         </Link>
         )
      };

    render() {
        return (
            <div className="container" id="timeline">
                <h2>Slick Go To</h2>
                <p>Total updates: {this.state.settings.updateCount} </p>
                <input onChange={this.changeHandler} value={this.state.slideIndex} type='range' min={0} max={3} />
                <SliderWrapper onImageClick={this.onImageClick}
                    ref={sliderWrapper => this.sliderWrapper = sliderWrapper}
                    beforeChange={this.changeUpdateCount.bind(this)}
                    afterChange={this.changeSlider.bind(this)}
                    slideIndex={this.state.slideIndex}
                    updateCount={this.state.updateCount}
                />
            </div>
        );
    }
}


class SliderWrapper extends React.Component {

    shouldComponentUpdate(nextProps, nextState) {
        // certain condition here, perhaps comparison between this.props and nextProps
        // and if you want to update slider on setState in parent of this, return true, otherwise return false
        if (this.props.updateCount !== nextProps.updateCount) {
            return false
        }
        return true
    }

    sliders() {
        return Resume.weeks.map(week => {
            return (
                // Timeline items
                <section className="timeline-carousel">
                    <h1>week {week.week}</h1>
                    <div className="timeline-carousel__item-wrapper" data-js="timeline-carousel">
                        <div className="timeline-carousel__item">
                            <div key={week} className="timeline-carousel__image">
                                <img onClick={() => this.props.onImageClick(week)} alt="image" src={week.frontImage}  />
                                <h2>UNDER CONSTRUCTION IN PROGRES..</h2>
                            </div>
                            <div className="timeline-carousel__item-inner">
                            <div className="pointer" />
                                <span className="year">{week.year}</span>
                                <span className="month">{week.albumDate}</span>
                                <p>{week.summary}</p>
                                <a href="#" className="read-more">Read more</a>
                            </div>
                        </div>
                    </div>
                </section>
             )
        });
    }

    render() {
        const settings = {
            dots: false,
            infinite: false,
            speed: 100,
            slidesToShow: 4,
            slidesToScroll: 1,
            afterChange: this.props.afterChange,
            beforeChange: this.props.beforeChange,
            responsive: [
                {
                  breakpoint: 700,
                  settings: {
                    arrows: false,
                    slidesToShow: 3
                  }
                },
                {
                  breakpoint: 500,
                  settings: {
                    arrows: false,
                    slidesToShow: 2
                  }
                },
                {
                  breakpoint: 400,
                  settings: {
                    arrows: false,
                    slidesToShow: 1
                  }
                }
            ]
        };
        return (
            <div >
                <Slider ref={slider => this.slider = slider} {...settings}>
                    {this.sliders()}
                </Slider>
            </div>
        );


    }
}

更新这是一张它的样子

标签： reactjsreact-router-dom

reactjs - 这个反应 onClick 不起作用是这个路由器链接错了吗？

问题描述

解决方案

推荐阅读