反应工作中的条件阅读但不应该？

Question

所以问题是，这段代码可以完美运行，但是为什么当我删除 return(Header /) 时它不起作用，但是当 return(Header /) 存在时它会返回正确的 Header 类型，具体取决于 props.weather是吗？

如果它依赖于它，它肯定应该返回而不是其他任何东西吗？

如果有人可以更好地重新格式化它，请随意，相对较新。

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 类型，另外，在功能组件中您必须render a react element，因此您必须提供类似Header 或any value as specified in docs 的节点。

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];
}