Description
重现步骤
在线示例链接：（必填）
步骤：
import React from 'react';
import './index.css';
import { UserOutlined } from '@ant-design/icons';
import { Bubble } from '@ant-design/x';
import { Button, Flex } from 'antd';
import type { GetProp, GetRef } from 'antd';
import { Content } from 'antd/es/layout/layout';
const roles: GetProp<typeof Bubble.List, 'roles'> = {
ai: {
placement: 'start',
avatar: { icon: , style: { background: '#fde3cf' } },
typing: { step: 5, interval: 20 },
style: {
maxWidth: 600,
},
},
user: {
placement: 'end',
avatar: { icon: , style: { background: '#87d068' } },
},
};
const App = () => {
const [count, setCount] = React.useState(3);
const listRef = React.useRef<GetRef>(null);
const [items, setItems] = React.useState<number[]>([
{
key: 'ai-4',
content: 'Mock AI content-4',
role: 'ai',
},
{
key: 'user-4',
content: 'Mock user content-4',
role: 'user',
},
{
key: 'ai-5',
content: 'Mock AI content-5',
role: 'ai',
},
{
key: 'user-5',
content: 'Mock user content-5',
role: 'user',
},
{
key: 'ai-6',
content: 'Mock AI content-6',
role: 'ai',
},
{
key: 'user-6',
content: 'Mock user content-6',
role: 'user',
},
]);
const add = () => {
const newArr = [
{
key: 'ai-7',
content: 'Mock AI content-7',
role: 'ai',
},
{
key: 'user-7',
content: 'Mock user content-7',
role: 'user',
},
{
key: 'ai-8',
content: 'Mock AI content-8',
role: 'ai',
},
{
key: 'user-8',
content: 'Mock user content-8',
role: 'user',
},
{
key: 'ai-9',
content: 'Mock AI content-9',
role: 'ai',
},
{
key: 'user-9',
content: 'Mock user content-9',
role: 'user',
},
];
setItems((prve) => [...prve, ...newArr]);
};
const front = () => {
const newArr = [
{
key: 'ai-1',
content: 'Mock AI content-1',
role: 'ai',
},
{
key: 'user-1',
content: 'Mock user content-1',
role: 'user',
},
{
key: 'ai-2',
content: 'Mock AI content-2',
role: 'ai',
},
{
key: 'user-2',
content: 'Mock user content-2',
role: 'user',
},
{
key: 'ai-3',
content: 'Mock AI content-3',
role: 'ai',
},
{
key: 'user-3',
content: 'Mock user content-3',
role: 'user',
},
];
setItems((prve) => [...newArr, ...prve]);
};
return (
<Flex gap="small" style={{ alignSelf: 'flex-end' }}>
<Button
onClick={() => {
add();
}}
>
Add Bubble
<Button
onClick={() => {
front();
}}
>
Front Bubble
</Button>
</Flex>
<Bubble.List
ref={listRef}
style={{ maxHeight: 300 }}
roles={roles}
items={items}
/>
</Flex>
);
};
export default App;
当前行为
点击 Front Bubble 按钮， 初始的5、6数据渲染识别
预期行为
No response
上下文
No response
版本
v1.0.4
您在哪些浏览器上遇到了这个问题？
No response