如何在 TypeScript 中使用带有 React Stateless Functional Component 的子组件? [英] How to use children with React Stateless Functional Component in TypeScript?

问题描述

在 React 中使用 TypeScript 我们不再需要扩展 React.Props 以便编译器知道所有 React 组件 props 都可以有子级:

interface MyProps { }class MyComponent 扩展了 React.Component{公共渲染():JSX.Element {返回<div>{this.props.children}</div>;}}

然而，对于无状态功能组件来说，情况似乎并非如此:

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

发出编译错误:

<块引用>

错误:(102, 17) TS2339:类型上不存在属性children"'我的道具'.

我猜这是因为编译器真的没有办法知道在 props 参数中将给一个普通函数 children.

那么问题是我们应该如何在 TypeScript 的无状态函数组件中使用 children?

我可以回到 MyProps extends React.Props 的旧方式，但是 Props 接口是 标记为已弃用，无状态组件没有或不支持 Props.ref 据我所知.

所以我可以手动定义 children 属性:

interface MyProps {孩子?:React.ReactNode;}

第一:ReactNode 是正确的类型吗?

第二:我必须将 children 写为可选 (?) 否则消费者会认为 children 应该是一个 attribute组件 (<MyStatelessComponent children={}/>)，如果未提供值则引发错误.

我好像遗漏了什么.任何人都可以澄清我的最后一个示例是否是在 React 中使用带有子级的无状态函数式组件的方式?

解决方案

React 16.8 更新:自 React 16.8 起，名称 React.SFC 和 React.StatelessComponent 已弃用.实际上，它们已经成为 React.FunctionComponent 类型或简称 React.FC 的别名.

不过你会以同样的方式使用它们:

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

在 React 16.8(旧版)之前:

现在，您可以使用 React.StatelessComponent<> 类型，如:

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

我在那里添加的是将组件的返回类型设置为 React.StatelessComponent 类型.

对于具有您自己的自定义道具(例如 MyProps 接口)的组件:

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

现在，props 已经获得了 children 属性以及来自 MyProps 接口的属性.

我在 typescript 2.0.7 版中检查了这个

此外，为了简洁，您可以使用 React.SFC 而不是 React.StatelessComponent.

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?

解决方案

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.

这篇关于如何在 TypeScript 中使用带有 React Stateless Functional Component 的子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！