不能在 react native 上用作 JSX 组件

Question

我使用条件渲染来渲染页面中更适合的视图，...

const NewSales = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is New Sales !</Text>
      </View>
    );
  };

 const TransactionViewDetail = ({ transactionType }: { transactionType: TransactionType }) => {
    if (transactionType == 'New Sales') {
      return <NewSales />;
    }
  };

 return (
    <>
      <StatusBar backgroundColor="transparent" barStyle="light-content" translucent={true} />
      <View style={{ flexGrow: 1, backgroundColor: colors.whiteSmoke }}>
        <TransactionViewDetail transactionType={route.params.type} />
      </View>
    </>
  );

但我在<TransactionViewDetail/>上遇到错误。 错误是“TransactionViewDetail”不能用作 JSX 组件。 它的返回类型'元素 | undefined' 不是有效的 JSX 元素。类型 'undefined' 不能分配给类型 'Element | 无效的'。

Answer 1

请注意，不得在另一个组件中声明 React 组件。 您可以在这里做两件事。

第一件事是你可以像这样在 JSX 中调用你的函数：

const NewSales = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is New Sales !</Text>
      </View>
    );
  };

 const TransactionViewDetail = ({ transactionType }: { transactionType: TransactionType }) => {
    if (transactionType == 'New Sales') {
      return NewSales;
    }
  };

 return (
    <>
      <StatusBar backgroundColor="transparent" barStyle="light-content" translucent={true} />
      <View style={{ flexGrow: 1, backgroundColor: colors.whiteSmoke }}>
        {TransactionViewDetail({ transactionType: route.params.type })}
      </View>
    </>
  );

第二件事是您可以像这样在根级别（而不是在另一个组件内）制作组件：

const NewSales = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is New Sales !</Text>
      </View>
    );
  };

const TransactionViewDetail = ({ transactionType }: { transactionType: TransactionType }) => {
    if (transactionType == 'New Sales') {
      return <NewSales />;
    }
  };

const YOUR_COMPONENT = () => {
   return (
    <>
      <StatusBar backgroundColor="transparent" barStyle="light-content" translucent={true} />
      <View style={{ flexGrow: 1, backgroundColor: colors.whiteSmoke }}>
        <TransactionViewDetail transactionType={route.params.type} />
      </View>
    </>
  );
}