Условное чтение в реакции работает, но не должен?

Question

Так что вопрос в том, что этот код работает отлично, но почему, когда я удаляю return (Header /), он не работает, но возвращает правильный тип Header, когда return (Header /) существует в зависимости от того, что props.weather is?

Конечно, он должен возвращаться, а не другие, если это зависит от него?

также, если кто-то может переформатировать это, то лучше не стесняйтесь, относительно новый для него.

import Header from './header'
import HeaderCloudy from './headercloudy'
import HeaderSunny from './headerSunny'
import HeaderRaining from './headerRain'

function HeaderLoadOut(props){
//log weather from api by city
console.log(props.weather);
//convert
  let types = {
    weather: props.weather
  }
//check weather load weather

if (types.weather == 'Clouds'){
  return <HeaderCloudy />
} else if (types.weather == 'Sunny'){
  return <HeaderSunny />
} else if (types.weather == 'Clear'){
  return <HeaderSunny />
} else if (types.weather == 'Rain'){
  return <HeaderRaining />
} else if (types.weather == 'Snow'){
  return <HeaderRaining />
}

console.log(types.weather)
return (
  <Header />
)

}
export default HeaderLoadOut;

Answer 1

Попробуйте использовать объект для сопоставления вашего weather типа, также в функциональном компоненте вы должны визуализировать элемент реагирования , поэтому вы должны предоставить такой узел, как Header или любое значение как указано в документах .

const WEATHER_TYPE = {
  Clouds: <HeaderCloudy />,
  Sunny: <HeaderSunny />,
  Clear: <HeaderSunny />,
  Rain: <HeaderRaining />,
  Snow: <HeaderRaining />
};

function HeaderLoadOut({ weather }) {
  return weather ? WEATHER_TYPE[weather] : <Header />;
}

export default HeaderLoadOut;

Как указано в документах, undefined также является действительным элементом реакции:

function HeaderLoadOut({ weather }) {
  return WEATHER_TYPE[weather];
}