Reputation: 605
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
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
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