如何解决“类型‘{}’不可分配给类型‘字符串’”问题

Question

这是我的index.tsx 文件：

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

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


const App = ( ) => {
  return (
    <View>
      <StatusBar hidden/>
      <UserInput/>
    </View>
  );
};


export default App;

这是我的

userInput

文件：

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

const UserInput = ( text: string ) => {
  return (
    <View>
      <Text>
        { text }
      </Text>
    </View>
  );
};

export default UserInput;

我的标签上的 index.tsx 文件问题 我制作的这个标签有 1 个参数。我无法给它一个价值。

我用谷歌搜索但找不到任何答案。

Answer 1

React 组件的每个函数都有一个参数，称为 props。 该参数是一个对象，包含传递给组件的所有 props，就像您想要使用

text

所做的那样。

因为它是一个对象，所以你必须使用点方法（

props.text

），或者更常见的是，解构对象，就像Andy已经评论过的那样：

const UserInput = ({text}: {text: string}) => {
  return (
    <View>
      <Text>
        { text }
      </Text>
    </View>
  );
};