映射时有条件地显示 svg 个图标（React js 应用程序）

Question

I'm building a simple app using the Open Weather API. The API call works (I have in my App root component) and returns a list array with 8 objects that contain the forecast (divided into 3-hr chunks). I have a folder with SVG images that I need to show depending on the id provided by each object. That worked in my Current Weather component. I stored a switch statement in a function and I pulled the information just from the list[0]. I'm trying to use the same function (passing it as props from CW) in the Future Weather component, in which I'm mapping to get the forecast for the next 24 hr. The map works (I'm getting temperature, time and icon code) but I don't know how to use that function to display the icons for the FW component (both CW and FT are stateless). I'm trying to reuse that function and not repeat myself. Thanks!

Current Weather component

const CurrentWeather = (props) => {
  let weatherInfo = props.weatherData.list;

  if (!weatherInfo) {
    return 'No info to display';
  }

  let id = props.weatherData.list[0].weather[0].id;

  function renderSwitch() {
    switch (true) {
      case id < 300:
        id = <img className="forecast-img" src={storm} alt="storm icon" />;
        break;
      case id >= 300 && id < 500:
        id = <img className="forecast-img" src={drizzle} alt="drizzle icon" />;
        break;
      case id >= 500 && id < 600:
        id = <img className="forecast-img" src={rain} alt="rain icon" />;
        break;
      case id >= 600 && id < 700:
        id = <img className="forecast-img" src={snow} alt="snow icon" />;
        break;
      case id >= 700 && id < 800:
        id = <img className="forecast-img" src={fog} alt="fog icon" />;
        break;
      case id === 800:
        id = <img className="forecast-img" src={clear} alt="clear icon" />;
        break;
      case id === 801:
        id = <img className="forecast-img" src={pcloudy} alt="particularly cloudy icon" />;
        break;
      case id > 800 && id < 806:
        id = <img className="forecast-img" src={mcloudy} alt="mostly cloudy icon" />;
        break;
      default:
        id = 'missing id';
    }
    return id;
  }

  return (
    <section className="general-forecast">
      <div className="forecast-caption">
        {/* {props.weatherIcon} */}
        {renderSwitch()}
        <p>{weatherInfo[0].weather[0].description}</p>
        <div className="temperature">
          <p>
            <strong>Temperature </strong>
            {Math.floor(weatherInfo[0].main.temp_min)}&#8451; to{' '}
            {Math.ceil(weatherInfo[0].main.temp_max)}
            &#8451;
          </p>
        </div>
        <div className="percentages">
          <ul>
            <li>
              <strong>Humidity </strong>
            </li>
            <li>{weatherInfo[0].main.humidity}%</li>
            <li>
              <strong>Pressure </strong>
            </li>
            <li>{weatherInfo[0].main.pressure}</li>
          </ul>
        </div>
      </div>
      <FutureWeather weatherData={weatherInfo} weatherIcon={renderSwitch} />
    </section>
  );
};

export default CurrentWeather;

Future Weather component

const FutureWeather = (props) => {
  let weatherInfo = props.weatherData;
  // let weatherIcon = props.weatherIcon;

  if (!weatherInfo) {
    return 'No info to display';
  }

  const weatherData = weatherInfo.map((element) => {
    return (
      <div className="next-forecast" key={element.dt}>
        <li>{element.dt_txt.slice(-8, -3)}</li>
        <li>{element.weather[0].id}</li>
        <li>{Math.round(element.main.temp)}&#8451;</li>
      </div>
    );
  });

  return (
    <div>
      <section className="detailed-forecast">
        <p>Future Weather Here</p>
        <ul className="detailed-forecast">{weatherData}</ul>
      </section>
    </div>
  );
};

export default FutureWeather;

Answer 1

Currently, you're giving the renderSwitch function as a property weatherIcon to the FutureWeather component. So, if you want to use it, you can call weatherIcon() (with parentheses) inside of FutureWeather .

It would also be possible to give the result of renderSwitch() as the property by calling the function like this:

<FutureWeather weatherData={weatherInfo} weatherIcon={renderSwitch()} />

In this case, you would insert { weatherIcon } in the template of FutureWeather .

In both cases, you should know that you only use one single icon for all kinds of usages, because you calculate the id only once (not for each day).

Generally, I would recommend not to use a global variable, but use the id as a parameter for the function call. It will be much easier to test the function, if it doesn't have side effects.