react.js - react中利用react-router怎么实现点击图片跳转？

问题描述

问 题

想实现点击Paper组件，跳转到一个新的链接，可以使用Link和Redirect，不能用a标签，会导致全局重新加载。
handleVideoClick方法已经能识别出点击了哪一个Paper，但是不知道怎么写跳转的逻辑。因为不能在非render中渲染视图，所以不知道怎么做。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import { Link, Redirect } from 'react-router-dom';
import Paper from 'material-ui/Paper';
import Typography from 'material-ui/Typography';

import reptileImage from '../images/bg.jpg';

const styleSheet = createStyleSheet('VideoList', {
    card: {
        maxWidth: "98%",
        margin: "0 auto",
    },
});

class VideoList extends React.Component {
    constructor(props) {
        super(props);
    }

    handleVideoClick(videoId, event) {
        event.preventDefault();
        console.log(videoId);
    }

    render () {
        const classes = this.props.classes;
        return (
            <div>
                <Paper
                    className={classes.card}
                    style={{marginTop: 10}}
                    onClick={this.handleVideoClick.bind(this, "10001")}
                >
                    <img src={reptileImage} alt="Contemplative Reptile" width={document.getElementById('root').offsetWidth * 0.98} />
                    <div
                        style={{
                            marginRight: 10,
                            marginLeft: 10,
                        }}
                    >
                        <Typography type="headline" component="h2">
                            Lizard
                        </Typography>
                        <Typography component="p">
                            Lizards are a widespread group of squamate reptiles, with over
                            6,000 species, ranging across all continents except Antarctica
                        </Typography>
                    </div>
                </Paper>

                <Paper className={classes.card} style={{marginTop: 10}} onClick={this.handleVideoClick.bind(this, "10002")}>
                    <img src={reptileImage} alt="Contemplative Reptile" width={document.getElementById('root').offsetWidth * 0.98} />
                    <div
                        style={{
                            marginRight: 10,
                            marginLeft: 10,
                        }}
                    >
                        <Typography type="headline" component="h2">
                            Lizard
                        </Typography>
                        <Typography component="p">
                            Lizards are a widespread group of squamate reptiles, with over
                            6,000 species, ranging across all continents except Antarctica
                        </Typography>
                    </div>
                </Paper>
            </div>
        );
    }
}

VideoList.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(VideoList);

解决方案

a标签为什么会导致全局重新加载，Link最后渲染出来的也只是一个a标签而已。

再说，非要用Link，你给Link设一个背景图也好，里面放一张图片也好，都可以达到目的。

这篇关于react.js - react中利用react-router怎么实现点击图片跳转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！