Отображение данных с помощью динамических изображений
Итак, у меня есть следующий реагирующий компонент
import React from "react";
import ReactDOM from "react-dom";
/// Get out static assets
import logo1 from '../images/scaffold/logo1.svg';
import logo2 from '../images/scaffold/logo2.svg';
import logo3 from '../images/scaffold/logo3.svg';
import logo4 from '../images/scaffold/logo4.svg';
import logo5 from '../images/scaffold/logo5.svg';
import logo6 from '../images/scaffold/logo6.svg';
import logo7 from '../images/scaffold/logo7.svg';
const Links = (props) => {
return (
<div>
{Object.keys(props.link).map(i => (
<a key = {i} href = {props.link[i]}
target = "_blank">
<div className = "release-action">
<div className = "release-distro-logo">
<img src = {logo1}/>
</div>
<span>Action1</span>
</div>
</a>
))}
</div>
)
}
export default Links;
Я хотел бы изменить текст логотип и действие на основе данных, поступающих из реквизит. Можно ли для этого использовать ключ пары значений в операторе if? Так, например, если ключ был ссылка2, тогда будет использоваться логотип2, и диапазон изменится на Действие2, в основном логотипы будут визуально представлять ссылку, а URL-адрес ссылки будет использоваться в src ссылки.
ссылки загружаются через json и проталкиваются через реквизиты в компонент
"isbn" : "3049204",
"author" : "author name",
"links": {
"link1": "https://www.google.com",
"link2": "https://www.yahoo.com",
"link3": "https://www.facebook.com",
"link4": "https://www.twitter.com",
"link5": "https://www.instagram.com",
"link6": "https://www.gmail.com"
},
"cta" : "buy now"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Решением было бы создать объект, содержащий все доступные изображения, например:
const logos = {
link1: logo1,
link2: logo2,
// ...
};
А потом в React
const Links = (props) => {
return (
<div>
{Object.keys(props.link).map(i => (
<a key = {i} href = {props.link[i]}
target = "_blank">
<div className = "release-action">
<div className = "release-distro-logo">
<img src = {logos[i]}/>
</div>
<span>Action1</span>
</div>
</a>
))}
</div>
)
}
Дело в том, что логотипы должны соответствовать ключу или значению props / data. Вышеупомянутое решение означает, что ссылки и логотипы всегда должны быть в правильном порядке, чтобы изображения соответствовали ссылкам .. верно?
хм .. я все еще не понимаю вышесказанное. как вы сопоставляете логотип с правильной ссылкой, когда ссылки предоставляются через json и передаются через реквизиты? Я обновил пример данных, так как список ссылок поступает из загруженного json
Я собираюсь предоставить логотипы для ссылок в json и сделать это таким образом, а не пытаться условно сделать это в приложении, спасибо за помощь!
Используйте Object.entries