React & Framer Builder：代码覆写改文本时如何保留样式？

你当前直接替换children为自定义组件的方式会丢失原有样式，核心原因是原文本组件的样式属性（如className、style）都绑定在原来的子元素上，新组件完全替换后没有继承这些属性。以下是两种可行的解决方案：

方案一：利用React.cloneElement复用原元素样式 #

通过克隆原文本元素，替换其内容的同时保留所有原有属性（包括样式），是最直接的解决方式。

修改组件与覆写逻辑 #

import React, { useState, useEffect, cloneElement } from 'react';

function SetCurrentUsd(props: Props & { originalElement: React.ReactElement }) {
  const { initialUsd, originalElement } = props;
  const [usd, setUsd] = useState<string | number>("");

  useEffect(() => {
    // 你的数据获取逻辑
    const fetchData = async () => {
      // 示例接口请求，替换为你的实际逻辑
      const response = await fetch(`/api/get-usd?initial=${initialUsd}`);
      const data = await response.json();
      setUsd(data.response);
    };
    fetchData();
  }, [initialUsd]);

  // 克隆原文本元素，替换内容，保留所有原有属性
  return cloneElement(originalElement, {}, usd);
}

export function set50Usd(): Override {
  return {
    // 通过render方法获取原组件的props，拿到原文本元素
    render: (props) => {
      return <SetCurrentUsd initialUsd={50} originalElement={props.children} />;
    },
  };
}

// 其余覆写函数同理修改
export function set100Usd(): Override {
  return {
    render: (props) => {
      return <SetCurrentUsd initialUsd={100} originalElement={props.children} />;
    },
  };
}

方案二：直接修改原组件的文本内容（若覆写支持） #

如果你的覆写机制允许直接修改原组件的文本属性（而非替换整个children），可以简化逻辑：
比如原组件是通过text或label属性传递文本，直接修改该属性即可；若原组件用children传递文本，可在覆写时直接替换children的内容而非整个元素。

简化覆写示例 #

export function set50Usd(): Override {
  return {
    // 直接替换原children的内容，保留原元素结构
    children: (originalChild) => {
      const [usd, setUsd] = useState<string | number>("");
      useEffect(() => {
        // 数据获取逻辑
        const fetchData = async () => {
          const response = await fetch(`/api/get-usd?initial=50`);
          const data = await response.json();
          setUsd(data.response);
        };
        fetchData();
      }, []);
      return cloneElement(originalChild, {}, usd);
    },
  };
}

关键原理 #

• React.cloneElement会创建一个新的React元素，保留原元素的所有props（包括样式、事件绑定等），仅替换你指定的内容（第三个参数）。
• 避免直接替换整个children，而是复用原文本元素的结构，确保样式属性不会丢失。

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