---
order: 3
title: 头像群
zh-CN: 头像群
en-US: ClusterAvatar
---

## zh-CN

+ 完整展示组内每一个成员的头像
+ 头像之间独立不遮挡，区别组的暗示
+ 每个头像均可以单独点击，点击之后的操作根据业务需要定制

## en-US

+ Show the avatar of each member in the cluster
+ Independent and unobstructed between avatars, different from group
+ Each avatar can be clicked individually, and the operation after clicking is customized

````jsx
import Avatar from '../src/index.jsx';

const { ClusterAvatar } = Avatar;

const dataSource = [
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011g54c00622f08f679fbbb1b4dbe9a311ec/w/200/h/200',
    text: '成员1',
    id: 1,
  },
  {
    text: '晓光',
    id: 2,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011g247aae1f45a5dc1fa6be54048292603b/w/200/h/200',
    text: '成员3',
    id: 3,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011he036f61ebeb2f1e09c0e586b4788a195/w/200/h/200',
    text: '成员4',
    id: 4,
  },
];

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      size: 'medium',
      dataSource,
    };
  }

  onClose = (data) => {
    const { dataSource } = this.state;
    const filtered = dataSource.filter(d => d.id !== data.id);
    this.setState({
      dataSource: filtered,
    });
  }

  onSelect = (data) => {
    console.log('onSelect', data);
  }

  onAdd = () => {
    console.log('onAdd');
  }

  render() {
    const { dataSource } = this.state;
    return (
      <ClusterAvatar
        dataSource={dataSource}
        onSelect={this.onSelect}
        onClose={this.onClose}
        onAdd={this.onAdd}
      />
    )
  }
}

ReactDOM.render(<Demo />, mountNode);
````