在ReactJS中有条件隐藏div元素

Question

我是新的ReactJS，有一个代码，我应该隐藏下面的div，直到数据从后端返回。因此，有一个输入，在单击提交按钮时搜索ID。检索到信息后，只有

名称"XYZ">

">

地址;123年,abc"

应该显示。因为现在它显示，(空格在它的前面)，所以我只是想名字和地址标题被隐藏，直到数据被检索。

名字

地址代码如下:

<div className="info">
<div className="info-block">
<div className="info-title"><TranslatedString stringId="name" /></div>
<div className="info-cell">{returnObj?.data?.name}</div>
<div className="info-title"><TranslatedString stringId="address" /></div>
<div className="info-cell">{returnObj?.data?.address}</div>                 
</div>
</div>

returnbj是存储后端数据的地方。我尝试在信息标题和信息单元格上添加条件，如stringId={returnbj ?status == "Success"?"name":null}，但是没有成功。

Answer 1

要防止在获取数据之前呈现div，您可以这样做:

{returnObj?.data && (
<div className="info">
<div className="info-block">
<div className="info-title"><TranslatedString stringId="name" /></div>
<div className="info-cell">{returnObj.data.name}</div>
<div className="info-title"><TranslatedString stringId="address" /></div>
<div className="info-cell">{returnObj.data.address}</div>                 
</div>
</div>
)};

Answer 2

div的可见性可以在获取请求时通过维护状态来控制。

const [isDivVisible, setIsDivVisible] = useState(false)
const fetchReq=async()=>{
setIsDivVisible(false)
const res=await fetch(url)
const data=await res.json()
setIsDivVisible(true)
}

在获取请求开始前将状态设为false，在获取结果后将其设为true并在div

的内联样式中使用

const styles={display:isDivVisible?block:none}
return (
<div style={styles}>
Your code
</div>