我们上一节封装了一个按钮,这一节我们继续理解封装的概念和了解封装组件需要注意的事项
首先我们回顾上一篇最后的代码,代码如下
const Button = ({color,text}) =>{
return {
type: 'button',
props: {
className: `btn btn - $ {
color
}`,
children: {
type: 'em',
props: {
children: text,
},
},
},
};
}
我们最终调用的形式如下所示 Button({color:‘blue’, text:‘Confirm’}) 进行创建,其实我们发现 Button
和 button
或者和 em
一样都可以 作为一个元素存在,我们可以以 Button 为基础创建特定属性的按钮,将其称为自定义类型的元素 或者可以称为组件元素。和上一节相同,我们可以采用 JSON 结构来描述它