What is react component in typescript inteface?

In typescript interface, we can define, like :

export interface ViewContainerProps {
  style?: ViewStyle | ViewStyle[];
  children?: React.ReactNode
  aString:string
  aNumber:number
}

I want to write a custom top-level <View>, to cover all screen, it look like this:

const VIEW_CONTAINER: ViewStyle = {
  width: windowWidth,
  height: windowHeight,
};
export interface ViewContainerProps {
  style?: ViewStyle | ViewStyle[];
  children?: React.ReactNode ///no , something wrong
}
export const ViewContainer = (props: ViewContainerProps) => {
  const {style, children} = props;
  return <View style={[style, VIEW_CONTAINER]}>{children}</View>;
};

And i want to children return React component to interact and do anything that a react component do, what type of React can i put in typescript interface? I read some docs , say that React.reactNode a light, stateless, immutable, virtual representation of a DOM node, feel like it not what i want when create top-level components that wrap all child components

Please help, thank you a lots

Upvotes: 0

Views: 71

Answers (2)

Ben Wainwright
Ben Wainwright

Reputation: 4621

React.ReactNode is the correct type. One way to be sure of that is by looking at the build in type for functional components React.FC, you can see that it types the children prop as React.ReactNode.

Rather than adding the children prop yourself, you should use React.FC for your component:

import React from "react"

export interface ViewContainerProps {
  style?: ViewStyle | ViewStyle[];
}

export const ViewContainer: React.FC<ViewContainerProps> = (props) => {
  const { style, children } = props;
  return <View style={[style, VIEW_CONTAINER]}>{children}</View>;
};

Upvotes: 1

rbkannan
rbkannan

Reputation: 374

You can use React.FunctionComponent or React.FC

import React, { FC } from 'react';

export const ViewContainer: FC = (props: ViewContainerProps) => {
  const {style, children} = props;
  return <View style={[style, VIEW_CONTAINER]}>{children}</View>;
};

Upvotes: 1

Related Questions