我只想在答案是肯定的時候顯示一個圖示？
{
<div className={"options"}>
<img src={iconteleconsult} alt={"teleconsultation"}/>
</div>
}
uj5u.com熱心網友回復：
這是代碼示例，這將有所幫助：
response
? <div className={"options"}>
<img src={iconteleconsult} alt={"teleconsultation"} />
</div>
: null
uj5u.com熱心網友回復：
您可以這樣做也可以有條件地渲染影像。
condition && <img ... />
例子：
const { forwardRef, useState } = React;
const Parent = () => {
const [isShowImage, setShowImage] = useState(4);
const imageShowHandler = () => {
setShowImage(isShowImage => !isShowImage);
};
return (
<div>
{ isShowImage && <div className={"options"}>
<img src={'https://image.shutterstock.com/image-photo/silhouette-boy-playing-cricket-evening-600w-1605103354.jpg'} alt={"teleconsultation"} />
</div>}
<br />
<button onClick={imageShowHandler}>Toggle Image</button>
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
最少的代碼
定義一個狀態中的默認影像并根據某些條件更新它。
const [defaultImage, setDefaultImage] = useState<image> // your image
useEffect(() =>{
if(someCondition) {
setDefaultImage('newImage');
}
}, [])
{
<div className={"options"}>
<img src={defaultImage} alt={"teleconsultation"}/>
</div>
}
將來如果您打算多次顯示影像，則這種方式將在所有地方都不需要 if/else。同樣的代碼也可以。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/353997.html
標籤：javascript html 反应 细绳 展示