How to use children with React Stateless Functional Component in TypeScript?

reactjs typescript

Using TypeScript with React we no longer have to extend React.Props in order for the compiler to know that all react component props can have children:

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

However, it doesn't seem to be the case for stateless functional components:

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

Emits the compile error:

Error:(102, 17) TS2339: Property 'children' does not exist on type 'MyProps'.

I guess this is because there's really no way for the compiler to know that a vanilla function is going to be given children in the props argument.

So the question is how should we use children in a stateless functional component in TypeScript?

I could go back to the old way of MyProps extends React.Props, but the Props interface is marked as deprecated, and stateless components don't have or support a Props.ref as I understand it.

So I could define the children prop manually:

interface MyProps {
  children?: React.ReactNode;
}

First: is ReactNode the correct type?

Second: I have to write children as optional (?) or else consumers will think that children is supposed to be an attribute of the component (<MyStatelessComponent children={} />), and raise an error if not provided with a value.

It seems like I'm missing something. Can anyone provide some clarity on whether my last example is the way to use stateless functional components with children in React?

Yura

You can use React.PropsWithChildren<P> type for your props:

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}

pztrick

React 16.8 Update: Since React 16.8, the names React.SFC and React.StatelessComponent are deprecated. Actually, they have become aliases for React.FunctionComponent type or React.FC for short.

You would use them the same way though:

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

Before React 16.8 (Older):

For now, you can use the React.StatelessComponent<> type, as:

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

What I have added there is setting the return type of the component to React.StatelessComponent type.

For a component with your own custom props (like MyProps interface):

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

Now, props has got the children property as well as those from MyProps interface.

I checked this in typescript version 2.0.7

Additionally, you can use React.SFC instead of React.StatelessComponent for brevity.

Thanks! It seems I'm on an old version of the typings that doesn't support this... I guess it's time to bite the bullet and use TS 2.0 with @types

React.StatelessComponent / React.SFC are deprecated. It is recommended to refer to React.FunctionComponent instead.

Note that this method does not work if you have a generic component

chris6953

Simpler answer: Use ReactNode:

interface MyProps {
  children?: React.ReactNode
}

If children is optional or not (i.e. having ? or not) depends on your component. The ? is the most concise way to express that, so nothing wrong with that.

On history: This was not necessarily the correct answer back when originally asked: The type ReactNode was added in (almost) its current form in March 2017 by this pull request only, but almost everyone reading this today should be on a modern enough version of React.

Lastly, about passing children as "attribute" (which, in React lingo, would be passing it as "prop", not attribute): It is possible, but in most cases reads better when passing JSX children:

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

reads more easily than

<MyComponent children={<p>This is part of the children.</p>} />

N S Niko

You can just add children to the component and if it is connected to a container that is all you need.

const MyComponent = ({ 
   children  
}) => {
  return <div>{children}</div>

}

And it was a TypeScript question.

Jun Yin

You can use

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

React.SFC is deprecated

How to use children with React Stateless Functional Component in TypeScript?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US