日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達者為師

網(wǎng)站首頁 編程語言 正文

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

作者：叉叉醬 ? 更新時間： 2022-12-29 編程語言

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

比如有這樣的一個需求，子組件通過父組件傳遞過來的props，來動態(tài)顯示<h1>到<h6>標(biāo)簽，可以先不管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標(biāo)簽顯得不是很靈活，可以想象下，如果可以修改標(biāo)簽，直接通過標(biāo)簽拼接的方式

舉例"<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。

React修改標(biāo)簽頁名

React默認打開的標(biāo)簽頁名為React App，那么我們?nèi)绾胃鶕?jù)我們的項目來全局更改標(biāo)簽頁名呢？

方法

找到項目中的public文件夾，再找到下面的index.html文件，修改其中的

<title>React App</title>

將其中的React App改為自己想要的名字即可

如果要修改圖標(biāo)，同樣在該文件中查找相關(guān)的標(biāo)簽進行更改。

原文鏈接：https://blog.csdn.net/weixin_39782183/article/details/104751431

欄目分類
最近更新