text.slice is not a function报错：如何截取ReactMarkdown组件中的文本？

你传入ReadMore组件的children是<ReactMarkdown />生成的React元素对象，而非字符串类型的原始文本，对象不存在slice方法，调用时就会触发该类型错误。

调整传参逻辑，直接把从接口拿到的原始markdown文本传给ReadMore组件，在组件内部完成截断逻辑后再交给ReactMarkdown渲染，完整实现如下：

import { useState } from 'react';
import ReactMarkdown from 'react-markdown';

const ReadMore = ({ rawMarkdown, maxCharacterCount = 100 }) => {
  // 控制展开/收起状态
  const [isExpanded, setIsExpanded] = useState(false);
  // 判断是否需要截断
  const isTruncated = rawMarkdown.length > maxCharacterCount;
  // 处理显示的文本
  const displayText = isExpanded 
    ? rawMarkdown 
    : rawMarkdown.slice(0, maxCharacterCount) + (isTruncated ? '...' : '');

  return (
    <div>
      <ReactMarkdown source={displayText} />
      {isTruncated && (
        <button onClick={() => setIsExpanded(!isExpanded)} style={{ background: 'none', border: 'none', color: '#0070f3', cursor: 'pointer', padding: 0 }}>
          {isExpanded ? '收起' : '展开更多'}
        </button>
      )}
    </div>
  );
};

<ReadMore rawMarkdown={item.texte} maxCharacterCount={100} />

如果需要避免截断破坏markdown语法导致渲染异常，可以先将markdown转换为纯文本判断长度，再决定是否截断原始markdown内容，避免出现语法不完整的渲染问题。

内容的提问来源于stack exchange，提问作者Rom-888