单击外部 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>

或使用反应路由器 Link

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

通过这种方式，Image组件不关心重定向或更改 URL，并且该功能由适当的组件或标签处理。

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