как изменить изображение sr c с помощью реквизита со стилизованным компонентом и отреагировать

Question

Я хочу повторно использовать свой компонент для нескольких страниц. Итак, я должен изменить img sr c в компоненте styled.img в качестве пропускающих элементов.

Можно ли изменить изображение sr c в компоненте со стилем?

Я применил свой код, как показано ниже. это не работает ..

//logic

import Myimg from './img/icon_my';

const OngoingLists = ({ ...props }) => {
  return (
    <ListsOutWrap>
      <ProgramListWrap {...props}>
        <IconWrap {...props} >
          <MyIcon {...props} />
        </IconWrap>
      </<ProgramListWrap>
    </ListsOutWrap>
  );
}


// styled component 
const MyIcon = styled.img.attrs({
  src: props => props.Img || { Myimg },
})`
  width: 100%;
`;

Я пробовал как выше, ни одно изображение не отображается ... даже файл img по умолчанию не показывает .. как я могу изменить файл sr c с помощью реквизита ?? я должен использовать фоновое изображение?

спасибо за вашу помощь заранее! :)

Answer 1

Стилизованные компоненты по-прежнему являются просто реагирующими компонентами, и вы можете просто предоставить значение реквизита по умолчанию в случае, если реквизит src не пропущен при использовании.

import Myimg from './img/icon_my';

const MyIcon = styled.img`
  width: 100%;
`;

MyIcon.defaultProps = {
  src: Myimg,
};

Использование:

<MyIcon /> // uses default Myimg
<MyIcon src="/path/to/sourceImage" /> // uses "/path/to/sourceImage"

BTW Правильный attrs формат для приема реквизитов будет означать определение функции, принимающей реквизиты и возвращение объекта:

const MyIcon = styled.img.attrs(props => ({
  src: props.Img || Myimg,
}))`
  width: 100px;
`;