React中同属性不同组件条件渲染的DRY方法咨询

嘿，这个场景太常见了——明明两个组件的大部分props和内容都一样，却要写两遍渲染逻辑，完全违背DRY（Don't Repeat Yourself）原则对吧？我给你分享几个行业里常用的技巧，帮你把代码精简干净：

1. 动态指定组件类型 + 提取通用props #

这是最直接的方法：先把重复的props抽成一个对象，再用变量动态决定要渲染的组件类型，最后用扩展运算符把通用props展开，只单独处理组件特有的属性。

示例代码：

import { useState, Text, TextInput } from 'react-native';

function MyComponent() {
  const [isEditable, setIsEditable] = useState(false);
  const [textContent, setTextContent] = useState('这是一段可切换的文本');

  // 提取所有两个组件共用的props
  const commonProps = {
    style: { fontSize: 16, padding: 8, borderColor: '#ccc', borderWidth: 1 },
    numberOfLines: 1,
  };

  // 动态确定要渲染的组件
  const TargetComponent = isEditable ? TextInput : Text;

  return (
    <TargetComponent
      {...commonProps}
      {/* 只给对应组件传特有props */}
      {...(isEditable 
        ? { value: textContent, onChangeText: setTextContent } 
        : { children: textContent }
      )}
      onPress={() => setIsEditable(!isEditable)}
    />
  );
}

这里要注意：<TextInput>不支持children属性，所以我们用条件判断只在渲染<Text>的时候传入文本内容，避免出现不必要的警告。

2. 封装自定义可切换组件（推荐） #

如果这个切换逻辑在你的项目里多次用到，最好把它封装成一个独立的自定义组件，上层组件完全不用关心内部是<Text>还是<TextInput>，只用传必要的参数就行。

示例代码：

import { Text, TextInput, TouchableWithoutFeedback } from 'react-native';

// 封装可编辑文本组件
const EditableText = ({
  isEditable,
  value,
  onChangeText,
  onPressToggle,
  ...restProps
}) => {
  // 点击切换编辑状态（也可以把切换逻辑放在上层，这里只是示例）
  const handlePress = () => {
    if (onPressToggle) onPressToggle();
  };

  if (isEditable) {
    return (
      <TextInput
        value={value}
        onChangeText={onChangeText}
        autoFocus={isEditable}
        {...restProps}
      />
    );
  }

  return (
    <TouchableWithoutFeedback onPress={handlePress}>
      <Text {...restProps}>{value}</Text>
    </TouchableWithoutFeedback>
  );
};

// 上层组件使用
function ParentComponent() {
  const [isEditable, setIsEditable] = useState(false);
  const [text, setText] = useState('初始文本');

  return (
    <EditableText
      isEditable={isEditable}
      value={text}
      onChangeText={setText}
      onPressToggle={() => setIsEditable(!isEditable)}
      style={{ fontSize: 18, color: '#333' }}
    />
  );
}

这种方式的优势在于：复用性极强，代码逻辑集中，上层组件的代码会非常简洁，而且后续如果要修改切换逻辑或者添加新功能（比如失去焦点自动切回文本模式），只需要在自定义组件里修改即可，不用改所有用到的地方。

小提醒 #

• 注意区分组件特有的props：比如<TextInput>的secureTextEntry、keyboardType这些属性，不要传给<Text>；<Text>的selectable属性也不要传给<TextInput>，否则会触发React Native的警告。
• 如果需要处理更复杂的状态切换（比如编辑完成后自动保存），可以在自定义组件里添加对应的生命周期或回调逻辑。

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