Question

我有2个类：singlePageView.js和singlePageView.style.js 我的问题：我确实从数据库中加载了产品信息（一个简单的电子商务网站），但是仍然无法正确显示图像。

singlePageView 类通过以下API调用从我的mongoDB中获取产品信息：

  let url = "http://127.0.0.1:5000/api/products/"+match.params.slug;      
  const { data, loading } = useDataApi(url);

数据加载完美，但是呈现的图像始终相同，因为它在 singlePageView.stlye.js 中始终加载相同的内容：

import singlePostBgImg from 'assets/images/single-post-bg.jpg';

export const PostImage = styled.div`
  background-image: url(${singlePostBgImg});
  background-position: center center;
  background-size: cover;
  height: 600px;
  position: relative;

  @media only screen and (max-width: 767px) {
    height: 406px;
  }

这是postImage呈现的方式（在singlePageView.js内部）：

return (
    <SinglePageWrapper>
      <PostImage>
.
.
.

我的问题如下：
如何将图像链接（从数据库中获取）传递给singlePageView.style.js类？

我的想法是这样的：<PostImage {*linktoimage*}>，然后以某种方式在style.js类中捕获链接。

Answer 1

类似这样的东西

const { data, loading } = useDataApi(url);
return (
    <SinglePageWrapper>
      <PostImage image={data.img} />

import singlePostBgImg from 'assets/images/single-post-bg.jpg';

export const PostImage = styled.div`
  background-image: ${(props) => url(${props.image})};
  background-position: center;
  background-size: cover;
  height: 600px;
  position: relative;

  @media only screen and (max-width: 767px) {
    height: 406px;
  }

Answer 2

有些人会认为此图像是内容的一部分，而不仅仅是装饰，因此它不应该是CSS，而应该是html。现在，让我们回到您的问题上。

您可以通过在react中使用style属性非常简单地完成此操作：

<PostImage style={{backgroundImage: data.img}} />

或者根据需要使用样式div

const Component = () => {
   return <PostImage image={'https://...'} />
}

const PostImage = styled.div`
  background-image: ${props => url(${props.image})};
  ...

Adapting based on props is well documented here

如何使用react将信息传递给另一个组件？

2 个答案: