Reactjs 反应工作中的条件阅读，但不应'；T

所以问题是，这段代码工作得很好，但是为什么当我删除return（Header/）时它不工作，但是当return（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;

从“./Header”导入头
从“./HeaderCloudy”导入HeaderCloudy
从“./HeaderSunny”导入HeaderSunny
从“/headerRain”导入HeaderRaining
功能头加载（道具）{
//按城市记录空气污染指数的天气
控制台。日志（道具。天气）；
//皈依
让类型={
天气：道具
}
//检查天气负荷
如果（types.weather==‘Clouds’）{
返回
}else if（types.weather=='Sunny'）{
返回
}else if（types.weather=='Clear'）{
返回
}否则如果（types.weather=='Rain'）{
返回
}else if（types.weather=='Snow'）{
返回
}
控制台.日志（类型.天气）
返回(
)
}
导出默认HeaderLoadOut；

尝试使用对象映射您的

天气

类型，此外，在功能组件中，您必须提供类似

标题

或的节点

---

这太棒了，谢谢，我从来没有想过要这样做，我的下一步是转换声明。

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;

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