react使用判断，显示相关组件----会出现代码，正确的写法是怎样的

如题,下面的写法，在实际显示的时候，会出现代码

const SpeakLoading = (props) => {
 
  return (
    <RecordLoadingWrapper>
     
    props.iatStatus=='ing'&&(<div>正在倾听，请说话</div><img className="recording-img" src={audioImg} alt="" srcSet="" />)
    props.iatStatus=='end'&&(<div>录音超时停止，请重启识别</div><Button onClick={props.startRecorder}></Button>)
    </RecordLoadingWrapper>
  );
};

解决办法

加上{}

const SpeakLoading = (props) => {
 
  return (
    <RecordLoadingWrapper>
     
    {props.iatStatus=='ing'&&(<div>正在倾听，请说话</div><img className="recording-img" src={audioImg} alt="" srcSet="" />)}
    {props.iatStatus=='end'&&(<div>录音超时停止，请重启识别</div><Button onClick={props.startRecorder}></Button>)}
    </RecordLoadingWrapper>
  );
};