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。
React修改標簽頁名
React默認打開的標簽頁名為React App，那么我們?nèi)绾胃鶕?jù)我們的項目來全局更改標簽頁名呢？
方法
找到項目中的public文件夾，再找到下面的index.html文件，修改其中的
<title>React App</title>
將其中的React App改為自己想要的名字即可
如果要修改圖標，同樣在該文件中查找相關的標簽進行更改。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法
這篇文章主要介紹了React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-09-09
React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關資料,需要的朋友可以參考下2016-11-11
下面小編就為大家?guī)硪黄獪\談react.js中實現(xiàn)tab吸頂效果的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React+Antd+Redux實現(xiàn)待辦事件的方法
這篇文章主要介紹了React+Antd+Redux實現(xiàn)待辦事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
React 使用browserHistory項目訪問404問題解決
這篇文章主要介紹了React 使用browserHistory項目訪問404問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
WebSocket是一種在Web應用中實現(xiàn)雙向通信的協(xié)議,它允許服務器主動向客戶端推送數(shù)據(jù),而不需要客戶端發(fā)起請求,本文將探索如何在React?18應用中使用WebSocket來實現(xiàn)實時通信,感興趣的可以了解下2024-01-01
useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數(shù)據(jù)來實現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧2023-11-11
useEffect()是react中的hook函數(shù),作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項數(shù)組不同的區(qū)別,對react useEffect()使用相關知識感興趣的朋友一起看看吧2024-05-05
本篇文章主要介紹了react路由配置方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08