条件阅读反应有效但不应该？

Question

所以问题是，这段代码工作得很好，但是为什么当我删除 return(Header /) 时它不起作用，但是当 return 时它是正确的 Header 类型=](Header /) 取决于 props.weather 是什么？

当然应该 return 而不是任何其他的，如果它依赖于它？

另外，如果任何人都可以重新格式化它，那就更好了，相对较新。

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, therefore you must supply a node like Header or 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];
}

条件阅读反应有效但不应该？

Conditional Reading in react working but shouldn't?

components

rendering

conditional-statements

reactjs