React Native（Expo）如何将状态属性作为props传入可复用组件？

你之前用模板字符串的方式不对——模板字符串只能生成字符串，没法直接用来创建对象的动态属性或者访问状态值。下面是正确的实现思路和代码：

核心问题分析 #

你之前的写法存在两个关键错误：

• 用模板字符串生成对象语法，得到的是字符串而非状态对象，setItem无法正确处理
• 用value={item.${value}}传递的是字符串"item.calories"，不是实际的状态值item.calories

正确的可复用组件实现 #

我们需要把动态属性的更新逻辑通过props传递给组件，而非在组件内部硬编码setItem，这样组件的通用性更强。

第一步：创建可复用组件 #

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

export const FormInput = ({ label, currentValue, onUpdate, keyboardType = 'numeric' }) => {
  return (
    <>
      <Text>{label}</Text>
      <TextInput
        style={styles.input}
        onChangeText={(text) => {
          // 处理输入：空值转0，也可根据需求改成null/空字符串
          const inputValue = text ? parseInt(text, 10) : 0;
          // 调用父组件传来的更新回调
          onUpdate(inputValue);
        }}
        keyboardType={keyboardType}
        // TextInput的value必须是字符串类型，所以做转换
        value={String(currentValue)}
      />
    </>
  );
};

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    padding: 8,
    marginVertical: 6,
    borderRadius: 4,
  },
});

第二步：在父组件中使用 #

import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from './FormInput';

const YourParentComponent = () => {
  const [item, setItem] = useState({ calories: 0, protein: 0 });

  return (
    <View>
      <FormInput
        label="Calories"
        currentValue={item.calories}
        onUpdate={(value) => setItem(prev => ({ ...prev, calories: value }))}
      />
      <FormInput
        label="Protein"
        currentValue={item.protein}
        onUpdate={(value) => setItem(prev => ({ ...prev, protein: value }))}
      />
    </View>
  );
};

export default YourParentComponent;

方案优势 #

• 组件与父状态解耦：FormInput不需要知道item或setItem的存在，只负责展示值和传递更新结果，复用性更强
• 逻辑清晰：父组件决定如何更新对应的状态属性，避免组件内部逻辑混乱
• 规避模板字符串错误：直接通过props传递实际状态值和更新逻辑，不会出现字符串转义的问题

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