不能在 react native 上用作 JSX 组件

Question

I use Conditional Rendering to render which view that would be appier in the page,...

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>
    </>
  );

but i got error on <TransactionViewDetail/> . The error is 'TransactionViewDetail' cannot be used as a JSX component. Its return type 'Element | undefined' is not a valid JSX element.Type 'undefined' is not assignable to type 'Element | null'.

Answer 1

Note that React Components must not be declared inside another component. There are two things that you can do here.

1st thing is you can call your functions inside your JSX like this:

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>
    </>
  );

2nd thing is you can make components on root level (not inside another component) like this:

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>
    </>
  );
}