如何动态更改html标签

比如有这样的一个需求，子组件通过父组件传递过来的props，来动态显示

到

标签，可以先不管react，考虑下vue如何实现呢？

Vue的实现方式

父组件

子组件

用vue的模板语法我们也是可以实现以上的需求，但是因为不能动态html标签显得不是很灵活，可以想象下，如果可以修改标签，直接通过标签拼接的方式

举例"测试"的方式，以这种方式来处理这种需求的话明显非常方便，废话不多说，来看看react的实现方式。

React的实现方式

父组件

import React from 'react'; import Child from './Child.js'; class Father extends React.Component{     render(){         return (                                                    )     } } export default Father;

子组件

import React from 'react'; const Child = (props)=>{     let MarkUp = `h${props.size}`;     return (                      你好              ) } export default Child;

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

React修改标签页名

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

方法

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

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。