React移动端文本渲染优化：寻求无重复代码的解决方案

1. 封装通用文本选择函数 #

不用修改原有JSON结构，写一个复用函数处理字段选择逻辑，只需传入基础字段名（比如title），函数自动判断对应移动端字段（titleMobile）是否可用：

const getDisplayText = (fieldName) => {
  const mobileField = `${fieldName}Mobile`;
  // 仅当处于移动端且对应移动端字段有有效内容时，优先返回移动端文本
  if (isMobile && Boolean(props.data[mobileField])) {
    return props.data[mobileField];
  }
  // 其他情况返回桌面端文本
  return props.data[fieldName];
};

使用时直接调用函数替代重复的三元表达式：

<h1>{getDisplayText('title')}</h1>
<p>{getDisplayText('description')}</p>
<span>{getDisplayText('buttonLabel')}</span>

2. 封装通用渲染组件 #

如果需要连标签一起复用，可以封装一个React组件，把字段名和标签类型作为参数传入：

const ResponsiveText = ({ fieldName, tag: Tag = 'span', ...props }) => {
  const text = getDisplayText(fieldName); // 复用上面的getDisplayText函数
  return <Tag {...props}>{text}</Tag>;
};

使用时更简洁：

<ResponsiveText fieldName="title" tag="h1" />
<ResponsiveText fieldName="description" tag="p" className="desc-style" />
<ResponsiveText fieldName="buttonLabel" tag="button" onClick={handleClick} />

3. 批量转换数据对象 #

如果希望一次性处理所有字段，避免每次渲染重复判断，可以写一个转换函数，生成包含适配后文本的新对象：

const transformData = (data) => {
  const transformed = {};
  for (const key in data) {
    // 跳过带Mobile后缀的字段，只保留基础字段
    if (key.endsWith('Mobile')) continue;
    const mobileKey = `${key}Mobile`;
    transformed[key] = isMobile && Boolean(data[mobileKey]) ? data[mobileKey] : data[key];
  }
  return transformed;
};

// 在组件初始化或isMobile状态变化时调用
const adaptedData = transformData(props.data);

之后直接使用转换后的对象：

<h1>{adaptedData.title}</h1>
<p>{adaptedData.description}</p>

这些方案都无需修改原有JSON结构，能大幅减少重复代码，可根据实际场景选择适配。

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