时间戳

首页 > 解决方案 > 单击外部 url react.js 的图像

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

问题描述

我正在做一个投资组合，我正在使用 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>
    )
}

谢谢你的关注。

标签： reactjsreact-routerreact-reduxreactive-programming

解决方案

通常，图像组件本身不应是链接。你应该做的是用<a>标签包装你的图像组件，或者Link如果你使用react-router.

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

或使用反应路由器Link

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

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

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

推荐阅读