React動態(tài)更改html標簽的實現(xiàn)方式

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

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

如何動態(tài)更改html標簽

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

Vue的實現(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">測試</h1>
? ? ? ? <h2 v-else-if="tagSize === 2">測試</h2>
? ? ? ? <h3 v-else-if="tagSize === 3">測試</h3>
? ? ? ? <h4 v-else-if="tagSize === 4">測試</h4>
? ? ? ? <h5 v-else-if="tagSize === 5">測試</h5>
? ? ? ? <h6 v-else>測試</h6>
?? ?</div>
</template>

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

用vue的模板語法我們也是可以實現(xiàn)以上的需求，但是因為不能動態(tài)html標簽顯得不是很靈活，可以想象下，如果可以修改標簽，直接通過標簽拼接的方式

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

React的實現(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;

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