比如有这样的一个需求,子组件通过父组件传递过来的
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
。