如何在 React 中使用带有样式组件的内联样式？

Question

我有一个相当简单的 React 组件：

import styled from 'styled-components';
import { formatUrl } from "formatUrl";

const StyledWrapper = styled.div`
  padding: 20px;
`;

const StyledImage = styled.img`
  border: solid 5px green;
`;


const MyComponent = ({ data }) => {
  const url = formatUrl(data.foo.url);

  return (
    <StyledWrapper>
     <StyledImage></StyledImage>
    </StyledWrapper>
  );
};


export default MyComponent;

但我完全不知道如何将<StyledImage> 设置为具有background-image 和url({url})。该 URL 在 MyComponent 中被格式化，我无法真正在组件之外访问它。在这种情况下我应该如何处理？有没有通用的解决方案？

我想做这样的事情：

<StyledImage styles="background-image: url({url})"></StyledImage>

我知道我可以使用“props”来描述 StyledImage 的样式，但我不确定在那里格式化数据是否是个好主意，这不会很好地扩展

注意：我计划将来将我的样式组件移动到单独的文件中，以便导入 StyledWrapper 和 StyledImage（不确定它是否会改变任何内容）。

感谢任何提示。

Answer 1

我提出了以下解决方案通用解决方案，对我来说效果很好。我创建了以下 Image.js 组件：

 import styled from "styled-components";

 const url = "https://picsum.photos/200/300";

const Image = styled.img.attrs({
  src: `${url}`,
})``;

export default Image;

在我的 App.js 中导入了图像组件并用作<Image /> 它工作正常。

在您的情况下，您应该进行以下更改以使其正常工作：

const MyComponent = ({ data }) => {
  const url = formatUrl(data.foo.url);
  // Create Image Component here as you are getting url from data props
   const StyledImage= styled.img.attrs({
    src: `${url}`,
  })`border: solid 5px green;`;

  return (
    <StyledWrapper>
      <StyledImage/>
    </StyledWrapper>
  );
};