组件

YIS 提供了一些常用的组件，在常规业务开发过程中，可以使用这些组件封装业务场景的组件。

使用 YIS 组件封装业务组件

组件需要继承 YIS 提供的 Component 基类，并为组件设置 displayName 实例属性。如果业务在封装常用组件可以将现有样式附在 theme 上，当调用组件传入 theme 时，会覆盖内置 theme。

代码节选自：yis-demo/src/pages/home/components/list.js

import { Component } from '@qnpm/yis';
import { View } from '@qnpm/yis/components';
import styles from '../main.css';

export default class List extends Component {
  displayName= "List";
  theme = styles;
  renderList(){
        const items = this.props.list.map((item, index) => (
            <View className={this.theme['list-item']} key={item.id} ripple={true} >
            <img className={this.theme.img} src={item.imageUrl} />
            <div className={this.theme.cont}>
                <span className={this.theme.index}>{index + 1}</span>
                    <h1>{item.title}</h1>
                    <div className={this.theme.des}>
                        <img className={this.theme.author} src={item.userHeadImg} />
                        <span>{item.userName}</span>
                    </div>
                </div>
            </View>
        ));
        return items;
  }
  render() {
      return (
          <div className={this.theme.list}>
              {this.renderList()}
          </div>
      )
  }
}

更多内容请参照框架 > 代码核心

使用 YIS 组件 封装业务组件

使用 YIS 组件封装业务组件