带样式组件的动态背景图像

Question

我一直在努力做这件事，我有一个名为“天气”的道具，它的价值可以是毛毛雨，云彩或任何其他类型的文字。

我在顶部导入了图像(目前只有两个)，我已经尝试了

background-image: url(${weather => (weather === 'Drizzle) ? Drizzle : Cloudy})

但它不起作用，它将始终与Cloudy (假)，我可能需要一个嵌套的ifs或三元操作符，但目前我想让它至少两个工作。

例如，我获得道具的代码--非结构化weather = 'Drizzle'将成为支柱)

import React from "react";
import styled from "styled-components";

import Drizzle from "../img/Drizzle.jpg";
import Cloudy from "../img/Cloudy.jpg";

const CardItems = styled.div`
  background-image: url(${Drizzle});


export default function Card({ max, min, name, img, onClose, weather }) {
  let icon = `http://openweathermap.org/img/wn/${img}@2x.png`;

  return (
    <CardItems>
      <TitleTwo>{name}</TitleTwo>
      <Image src={icon} alt="" />
      <TempsContainer>
        <TempText>
          <p>Min.</p>
          <p>{min}</p>
        </TempText>
        <TempText>
          <p>Max.</p>
          <p>{max}</p>
        </TempText>
      </TempsContainer>
    </CardItems>
  );
}

Answer 1

取代：

`background-image: url(${weather => (weather === 'Drizzle) ? Drizzle : Cloudy})`

通过：

`background-image: ${(props) => props.current === 'Drizzle' ? `url(${Drizzle})` : `url(${Cloudy})`};`

App.js

import React from 'react';
import './App.css';

import Card from './Card';

export default function App() {
  return <Card weather="Drizzle" />;
}

Card.js

import React from 'react';
import styled from 'styled-components';

import Drizzle from './img/Drizzle.jpg';
import Cloudy from './img/Cloudy.jpg';

export default function Card({ weather }) {   
  return (
   <CardItems current={weather} />
  );
}

const CardItems = styled.div`
  height: 100vh;
  width: 100%;
  background-image: ${(props) =>
    props.current === 'Drizzle' ? `url(${Drizzle})` : `url(${Cloudy})`};
`;