使用antd+typescript,想自定义List组件的内容但是提示需要添加必要的属性

1、参考antd-pro noticeIcon这个组件的时候,发现antd-pro里面,使用List组件,没有提供必要的属性。

      <List className={styles.list} >
        {data.map((item, i) => {
          const itemCls = classNames(styles.item, {
            [styles.read]: item.read,
          });
          return (
            <List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
              <List.Item.Meta
                className={styles.meta}
                avatar={item.avatar ? <Avatar className={styles.avatar} src={item.avatar} /> : null}
                title={
                  <div className={styles.title}>
                    {item.title}
                    <div className={styles.extra}>{item.extra}</div>
                  </div>
                }
                description={
                  <div>
                    <div className={styles.description} title={item.description}>
                      {item.description}
                    </div>
                    <div className={styles.datetime}>{item.datetime}</div>
                  </div>
                }
              />
            </List.Item>
          );
        })}
      </List>

这段代码,List没有提供dataSource等 且在List.Item 中使用onClick属性,但是在List.Item 的props中,没有这个属性。

2、现在我使用typescript来写这段代码,会发现很多报错

1 在List 提示需要我提供必要的属性
2 在Item 提示我onClick不在props当中

clipboard.png

3、所以我应该怎么解决这个问题

阅读 4.4k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题