reactjs - 如何使用带有样式组件的道具更改图像src并做出反应

Question

我想为多个页面重用我的组件。所以，我必须将 styled.img 组件中的 img src 更改为传递道具。

是否可以更改样式组件上的图像 src？

我应用了我的代码，如下所示。它不工作..

//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文件也没有显示......如何使用道具更改src文件？我应该使用背景图像吗？

提前感谢您的帮助！:)

标签： reactjsstyled-components

Answer 1

样式化的组件仍然只是反应组件，您可以简单地提供一个默认的 prop 值，以防src在使用时未传递 prop。

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"

顺便说一句，接受道具的正确attrs格式是定义一个接受道具并返回对象的函数：

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