Здравствуйте, подскажите Есть компонент Star: const Star: React.FC<IStarProps> = ({

Question

Здравствуйте, подскажите Есть компонент Star: const Star: React.FC<IStarProps> = ({

imgUrl, starsStep }) => {
return (
<div className={styles.wrap}>
<svg
width="160"
height="160"
viewBox="0 0 160 160"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<pattern id="pattern" width="100%" height="100%">
<image href={imgUrl} width="100%" className={styles.image} />
</pattern>
<path d={steps[starsStep]} fill="url(#pattern)" />
</svg>
</div>
);
};
----------
Если я в другом компоненте рендерю массив фото, передавая эти фото в star (arrayFotos.map(item => <Star key=item.id imgUrl={ite.foto} .../>), то у меня рисуется только первая фотка на все элементы, хотя на каждый элемент своя фотка передается, ниже будет фото как получается, понимаю что в svg проблема, но как решить ,куда глядеть есть мысли?

#frontend #javascript #programming #react.js #russian

0

04.06.2020

1 ответов

16 просмотров

Vladimir Kurchatkin · Accepted Answer

Vladimir Kurchatkin

В общем то проблема очевидна - ты ссылаешь на pattern по id, который у всех отрендеренных компонентов один

0

04.06.2020

169 похожих чатов

Здравствуйте, подскажите Есть компонент Star: const Star: React.FC<IStarProps> = ({

1 ответов

Похожие вопросы