我将使用fluent ui for react进行动态标签聊天。
实际上，我正在使用条件开关显示内容，该条件开关根据单击的选项卡项返回聊天内容。
这是切换条件
Bt2在聊天组件中，我设置了一个状态，该状态由初始聊天内容初始化（应该来自状态），然后在每次添加消息时进行更新。
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(false)
我的实际问题是，当我选择选项卡2或3时，聊天内容不会更改（作者姓名在选择let switchTasks = (type, data) => {
switch (type) {
case "people":
return <p>{data.content}</p>; // send basic text
case "chat":
return <ChatExample infos={data} />; // send component chat.
default:
break;
}
};
之后选择的最后一个选项卡上显示）
当我将const ChatExample = props => {
const [inputValue, setInputValue] = React.useState("");
const items = [
{
message: (
<Chat.Message
content="Hello"
author="John Doe"
timestamp="Yesterday, 10:15 PM"
mine
/>
),
contentPosition: "end",
attached: "top",
key: "message-id-1"
},
...
];
const [itemsChat, setItemsChat] = React.useState(items);
const handleKeyDown = event => { // to add messages to chat.
if (event.key == "Enter") {
let elm = {
message: (
<Chat.Message
content={inputValue}
author="John Doe"
timestamp="Yesterday, 10:15 PM"
mine
/>
),
contentPosition: "end",
attached: "top",
key: "message-id-1"
};
setItemsChat(itemsChat => [...itemsChat, elm]);
setInputValue("");
}
};
return (
<div>
<Chat items={itemsChat} />
<ItemLayout
content={
<Input
value={inputValue}
onKeyDown={event => handleKeyDown(event)}
onChange={event => setInputValue(event.target.value)}
fluid
clearable
placeholder="Message..."
/>
}
/>
</div>
);
};
替换为tab 1时，它的确会更改内容，但是在这种情况下，我将无法添加聊天消息（<Chat items={itemsChat} />代表<Chat items={items} /> +新消息）
如何通过不断向聊天室添加新消息来使标签更新聊天内容？
答案 0 :(得分：1)
如果您要为不同的数据“重用”相同的组件[树]，则应使用不同的key来强制重新呈现整个结构：
return <ChatExample infos={data} key={data.content} />;