如何在react-chat-elements的消息中添加自定义加载图标？

你尝试用custom属性插入加载图标，但组件props不支持这个属性，又不想用图片消息形式，这里给你几个简便灵活的实现思路：

方案1：用自定义渲染函数扩展消息类型 #

多数聊天组件会提供自定义消息渲染的API，比如renderMessage，你可以给消息定义一个loading类型，然后单独渲染加载图标：

<MessageList
  dataSource={[{
    position: "left",
    type: 'loading',
    title: ''
  }]}
  renderMessage={(item) => {
    if (item.type === 'loading') {
      return (
        <div className="loading-msg">
          <IonSpinner name="dots"></IonSpinner>
        </div>
      );
    }
    // 保留原有text类型的渲染逻辑
    return <div className="text-msg">{item.content}</div>;
  }}
/>

方案2：直接把加载图标嵌入文本消息内容里 #

如果组件允许content传入JSX元素，你可以直接把加载图标和文本放在一起，不用额外属性：

<MessageList
  dataSource={[{
    position: "left",
    type: 'text',
    title: '',
    content: (
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <IonSpinner name="dots"></IonSpinner>
        <span>正在加载中...</span>
      </div>
    )
  }]}
/>

方案3：封装独立的加载消息组件 #

如果组件完全不支持自定义渲染，你可以自己写一个加载消息组件，直接和MessageList配合使用：

// 自定义加载消息组件
const LoadingMsg = ({ position }) => {
  const bubbleStyle = {
    textAlign: position === 'left' ? 'left' : 'right',
    padding: '10px'
  };
  return (
    <div style={bubbleStyle}>
      <IonSpinner name="dots"></IonSpinner>
    </div>
  );
};

// 使用时
<div>
  <LoadingMsg position="left" />
  <MessageList dataSource={/* 你的正常消息数据 */} />
</div>

如果组件文档没提到这些扩展方式，优先检查组件是否有renderItem、renderMessage这类自定义渲染的props，这是最合规的做法，比硬改DOM要稳妥。

内容的提问来源于stack exchange，提问作者Joseph Reece