reactjs - 单击外部 url 的图像react.js

Question

我正在制作一个作品集，并且正在使用react.js。我只想单击一个图像(例如 StackOverflow 图标)，并且能够重定向到该页面。我看到了各种不同的方法，但我无法让它重定向。

我正在使用 React-Bootstrap，我不知道这是否会改变任何事情。

export default class Home extends Component {
render() {
    return (
        <Grid>
            <Jumbotron className="brainImg">
            </Jumbotron>
            <div class="footer"><center className="iconsBaby">
                <Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
                <Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
                <Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
            </center>
            </div>
        </Grid>
    )
}

感谢您的浏览。

Answer 1

一般来说，图像组件本身不应该是一个链接。你应该做的是用 <a> 包装你的图像组件标记或使用 Link如果您使用 react-router 组件.

<a href="https://github.com/Joeyryanbridges">
  <Image src="giticon.png" className="githubIcon" />
</a>

或与 react 路由器Link

<Link to="https://github.com/Joeyryanbridges">
  <Image src="giticon.png" className="githubIcon" />
</Link>

这样Image组件不关心重定向或更改 URL，并且该功能由适当的组件或标记处理。

始终记住，在可重用性和可维护性方面，关注点分离非常重要。