亲宝软件园·资讯

展开

React动态更改html标签的实现方式

叉叉酱 人气:0

如何动态更改html标签

比如有这样的一个需求,子组件通过父组件传递过来的props,来动态显示<h1>到<h6>标签,可以先不管react,考虑下vue如何实现呢?

Vue的实现方式

父组件

<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的模板语法我们也是可以实现以上的需求,但是因为不能动态html标签显得不是很灵活,可以想象下,如果可以修改标签,直接通过标签拼接的方式

举例"<h"+tagSize+">测试</h"+tagSize+">"的方式,以这种方式来处理这种需求的话明显非常方便,废话不多说,来看看react的实现方式。

React的实现方式

父组件

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;

相比较两种方式会发现react实现这类需求会更合适,react语法采用JSX语法,个人感觉语法比vue的template模板语法更加灵活,不过Vue现在也已经支持JSX。

React修改标签页名

React默认打开的标签页名为React App,那么我们如何根据我们的项目来全局更改标签页名呢?

方法

找到项目中的public文件夹,再找到下面的index.html文件,修改其中的

<title>React App</title>

将其中的React App改为自己想要的名字即可

如果要修改图标,同样在该文件中查找相关的标签进行更改。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论