# 组件结构
dooring的组件设计包含以下3个部分组件：
1、component 组件主体
2、schema 组件的DSL，结构协议层
3、template 定义了组件的类型、外观、从属关系，后期考虑纳入schema
接下来我会介绍一个基本的组件主体设计，以为template设计，在下一章会具体介绍schema部分。
## 组件设计
我们这里拿基本的header组件来举例，如下是header组件的代码：
```jsx
interface HeaderPropTypes extends IHeaderConfig {
isTpl: boolean;
}
const Header = memo((props: HeaderPropTypes) => {
const { bgColor, logo, logoText, fontSize, color } = props;
return props.isTpl ? (
< img style={{width: '100%'}} src={logos} alt="" />
) : (
);
});
```
我们只需要按照上面的方式编写组件即可，props是DSL定义的数据层，用来控制组件的shape，也就是组件的表现。我们看看header对应的template。
## template设计
```js
const template = {
type: 'Header',
h: 28,
displayName: '页头组件'
};
export default template;
```
以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。