이미지를 조건부로 반환하는 방법 reactjs

Question

현재 반응하고있는 프로젝트에서 작업하고 있는데, 조건이 충족되면 looked into it을 얻었으며 반응으로 조건부를 수행하는 몇 가지 방법이 있습니다. 그러나 나는 저를 도울 어떤 것도 보지 못했습니다. 내가 여기뿐만 아니라 재료 UI를 사용하고있어 내 코드의 일부입니다 : 그 내가 등 다른 이미지가 반환 할 4의 경우는 값이 2 인 경우

constructor(props) { 
super(props); 
this.state = { value: 1 }; 
} 

handleChange = (event, target, value) => { 
this.setState({ value }); 
}; 

render() { 
return (
    <div className="background"> 
    <div> 
     <MuiThemeProvider> 
     <DropDownMenu value={this.state.value} onChange= 
{this.handleChange}> 
      <MenuItem value={1} primaryText="Any" /> 
      <MenuItem value={2} primaryText="ex" /> 
      <MenuItem value={3} primaryText="am" /> 
      <MenuItem value={4} primaryText="p" /> 
      <MenuItem value={5} primaryText="l" /> 
      <MenuItem value={6} primaryText="e" /> 
     </DropDownMenu> 
     </MuiThemeProvider> 
     <br /> 

내가 이미지를 반환 할

Answer 1

React 렌더링 내용에 임의의 조건을 쉽게 추가 할 수 있습니다. 에 null 또는 undefined를 반환하는 부분 렌더링하는 원인 아무 반응 없음을

<div> 
    { 
    this.state.value === 2 ? getImageFor2() : null 
    } 
    { 
    this.state.value === 4 ? getImageFor4() : null 
    } 
</div> 

리콜 : 가장 깨끗한 방법 이럴 인라인 삼항 조건을 사용하는 것입니다.

<div> 
    { 
    this.state.value === 2 && getImageFor2() 
    } 
    { 
    this.state.value === 4 && getImageFor4() 
    } 
</div> 

나는 개인적으로 당신이 조심하지 않으면 두 번째는 어떤 경우 버그로 이어질 수 있기 때문에 첫 번째 옵션을 선호 :

당신은 &&/|| 행동 방법을 활용하여 그것을 할도 수있다.