功能背景
在vue中使用v-if、v-show、v-html這些命令得心應(yīng)手，那么react是否也存在這樣的命令呢？似乎是沒有的，需要自己實(shí)現(xiàn)，也就是用原生的寫法直接控制dom。文章來源：http://www.zghlxwxcb.cn/news/detail-510510.html
實(shí)際效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-510510.html
代碼實(shí)現(xiàn)
const [dialogVisible, setDialogVisible] = useState(false);
//實(shí)現(xiàn)v-html
const htmlString = '<strong>Hello, World!</strong>';
<hr/>
<p>v-if原生寫法實(shí)現(xiàn)</p>
{/* 使用if語句 */}
{dialogVisible && <p>This element is visible using if statement</p>}
{/* 使用三元表達(dá)式 */}
<p>v-if三元表達(dá)式原生寫法實(shí)現(xiàn)</p>
{dialogVisible ? <p>This element is visible using ternary expression</p> : null}
{/* 使用v-show方式 */}
<p>v-show原生寫法實(shí)現(xiàn)</p>
<p style={{ display: dialogVisible ? 'block' : 'none' }}>This element is visible using v-show style</p>
<p>v-html原生寫法實(shí)現(xiàn)</p>
<div dangerouslySetInnerHTML={{ __html: htmlString }} />
到了這里，關(guān)于React V6實(shí)現(xiàn)v-if、v-show、v-html的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![FE_Vue學(xué)習(xí)筆記 條件渲染[v-show v-if] & 列表渲染[v-for] 列表過濾 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
