如何解决React组件报错：Type '{}' is not assignable to type 'string'

问题根源 #

你的UserInput组件参数定义不符合React函数组件规范：React函数组件的参数是props对象，而非直接的单一值类型。当你在index.tsx中使用<UserInput/>时，默认传递的是空对象{}，但组件期望接收string类型，因此TypeScript抛出类型不匹配错误。

修复步骤 #

1. 修正UserInput组件的props类型 #

修改userInput.tsx，正确定义组件的props类型，并从props对象中获取text值：

import { View, Text } from 'react-native';
import React from 'react';

// 定义组件的props类型
type UserInputProps = {
  text: string;
};

// 接收props对象并解构text
const UserInput = ({ text }: UserInputProps) => {
  return (
    <View>
      <Text>
        { text }
      </Text>
    </View>
  );
};

export default UserInput;

2. 在父组件中传递text属性 #

修改index.tsx，给<UserInput/>传递符合要求的text属性：

import React from "react";
import UserInput from "./userInput";

import {
  View,
  StatusBar,
} from 'react-native';


const App = ( ) => {
  return (
    <View>
      <StatusBar hidden/>
      {/* 传递text属性，值为你需要的字符串 */}
      <UserInput text="这里是输入的文本内容"/>
    </View>
  );
};


export default App;

额外说明 #

如果需要text属性可选，可以在类型定义中添加?标记：

type UserInputProps = {
  text?: string;
};

同时在组件中给text设置默认值，避免渲染空内容：

const UserInput = ({ text = '' }: UserInputProps) => {
  // ...
};

内容的提问来源于stack exchange，提问作者M Radwan Assil abs_z1z