@strapi/blocks-react-renderer优化：替换空引号为换行并删除分号

你现在的需求是：从API获取的文本里有''（两个单引号），要把它换成换行符，但用@strapi/blocks-react-renderer@1.0.0写的代码没生效，还碰到了库的分号相关问题。

原代码的问题 #

1. 逻辑判断错误：你要找的是文本内容里的''，但代码里判断的是空字符串item.props.text === ''，完全不匹配目标内容
2. 替换逻辑无效：就算触发了替换逻辑，空字符串拆分后也得不到想要的结果
3. 返回结构有问题：原代码返回的result多数情况是undefined，而且JSX里多了多余的分号，可能触发库的分号兼容问题

修正后的代码 #

const enterParagraph = (data) => {
  const result = data.children.map((item) => {
    // 只处理包含文本内容的节点
    if (item?.props?.text) {
      // 全局替换所有''为HTML换行标签
      const newText = item.props.text.replace(/''/g, '<br />');
      // 克隆原组件，仅替换文本内容，保留原有结构
      return React.cloneElement(item, { text: newText });
    }
    // 无文本的节点直接返回
    return item;
  });

  // 用dangerouslySetInnerHTML渲染带换行的文本，同时去掉多余分号
  return <div dangerouslySetInnerHTML={{ __html: result.join('') }} />;
};

return (
  <BlocksRenderer
    content={item.text}
    blocks={{ paragraph: enterParagraph }}
  />
);

关键调整说明 #

• 用replace(/''/g, '<br />')精准匹配所有''，替换成能渲染换行的HTML标签
• 用React.cloneElement保留原组件的结构，只修改文本内容，不会破坏Strapi Blocks的渲染逻辑
• 用dangerouslySetInnerHTML让HTML换行标签生效，避免直接写<br />被当成纯文本
• 删除了原代码里返回JSX时的多余分号，解决库的分号相关兼容问题

内容的提问来源于stack exchange，提问作者sina mohsenian