React動(dòng)態(tài)更改html標(biāo)簽的實(shí)現(xiàn)方式

更新時(shí)間：2022年12月02日 09:39:26 作者：叉叉醬

這篇文章主要介紹了React動(dòng)態(tài)更改html標(biāo)簽的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

如何動(dòng)態(tài)更改html標(biāo)簽

比如有這樣的一個(gè)需求，子組件通過父組件傳遞過來(lái)的props，來(lái)動(dòng)態(tài)顯示<h1>到<h6>標(biāo)簽，可以先不管react，考慮下vue如何實(shí)現(xiàn)呢？

Vue的實(shí)現(xiàn)方式

父組件

<template>
?? ?<div>
?? ??? ?<Son :tagSize="1"/>
?? ?</div>
</template>

<script>
import Son from '../components/Son';
export default {
? ? name: "Father",
? ? components:{
? ? ? ? Son
? ? }
};
</script>

子組件

<template>
?? ?<div>
? ? ? ? <h1 v-if="tagSize === 1">測(cè)試</h1>
? ? ? ? <h2 v-else-if="tagSize === 2">測(cè)試</h2>
? ? ? ? <h3 v-else-if="tagSize === 3">測(cè)試</h3>
? ? ? ? <h4 v-else-if="tagSize === 4">測(cè)試</h4>
? ? ? ? <h5 v-else-if="tagSize === 5">測(cè)試</h5>
? ? ? ? <h6 v-else>測(cè)試</h6>
?? ?</div>
</template>

<script>
export default {
?? ?name: "Son",
?? ?props: {
?? ??? ?tagSize: {
? ? ? ? ? ? type:Number,
? ? ? ? ? ? default:1
? ? ? ? }
?? ?}
};
</script>

用vue的模板語(yǔ)法我們也是可以實(shí)現(xiàn)以上的需求，但是因?yàn)椴荒軇?dòng)態(tài)html標(biāo)簽顯得不是很靈活，可以想象下，如果可以修改標(biāo)簽，直接通過標(biāo)簽拼接的方式

舉例"<h"+tagSize+">測(cè)試</h"+tagSize+">"的方式，以這種方式來(lái)處理這種需求的話明顯非常方便，廢話不多說，來(lái)看看react的實(shí)現(xiàn)方式。

React的實(shí)現(xiàn)方式

父組件

import React from 'react';
import Child from './Child.js';

class Father extends React.Component{
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <React.Fragment>
? ? ? ? ? ? ? ? <Child size = { 1 }/>
? ? ? ? ? ? </React.Fragment>
? ? ? ? )
? ? }
}
export default Father;

子組件

import React from 'react';

const Child = (props)=>{
? ? let MarkUp = `h${props.size}`;
? ? return (
? ? ? ? <React.Fragment>
? ? ? ? ? ? <MarkUp>你好</MarkUp>
? ? ? ? </React.Fragment>
? ? )
}

export default Child;

相比較兩種方式會(huì)發(fā)現(xiàn)react實(shí)現(xiàn)這類需求會(huì)更合適，react語(yǔ)法采用JSX語(yǔ)法，個(gè)人感覺語(yǔ)法比vue的template模板語(yǔ)法更加靈活，不過Vue現(xiàn)在也已經(jīng)支持JSX。