Щелкните изображение для внешнего URL-адреса react.js
Я работаю над портфолио и использую response.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>
)
}
Спасибо, что посмотрели.
Ответы 3
Как правило, компонент изображения не должен быть ссылкой сам по себе. Что вам следует сделать, так это обернуть компонент изображения тегом <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-адресов, и эта функциональность обрабатывается соответствующим компонентом или тегом.
Всегда помните, что разделение проблем очень важно, когда речь идет о возможности повторного использования и ремонтопригодности.
1. Вы можете сначала заявить в государстве
load:false
2. используйте событие onClick и вызовите такую функцию, как -
<Image src = "giticon.png" className = "githubIcon" onClick = {()=> handleClick()} />
- Внутри функции установите для load значение true.
- Теперь проверьте значение нагрузки, чтобы направить все, что вам нужно. Надеюсь это работает.
Просто оберните тег внутри так:
<a href = "abc.com">
<Image src = "abc.png" />
</a>
Или, если вы используете реактивный маршрутизатор, вы можете сделать это:
import { Link } from "react-router-dom";
<Link to = "www.abc.com">
<Image src = "abc.png" />
</Link>
Надеюсь на эту помощь:
Зохейри, ты мужчина! работает отлично! Большое спасибо!