提问者:小点点

如何在Typescript中为其子函数设置函数道具类型?类型TS2339上不存在属性“children”


作为参考,我使用的是React16.9.0和Typecript3.5.3。如果您安装了CreateReact App并创建了TypeScript项目,您可以添加以下最小示例来重现问题:

import React from 'react';
import './App.css';

interface TreeComponentProps {
  recursion_level: number;
}

interface TreeComponentState {
}

class TreeComponent extends React.Component<TreeComponentProps, TreeComponentState>
{
  constructor(props: TreeComponentProps) {
    super(props);
    this.state = {
    };
  }

  render() {
    console.log( 'I was triggered during TreeComponent render...' );

    // const ListElements: any = (props: any) =>
    const ListElements: React.FunctionComponent<TreeComponentProps> = (props: TreeComponentProps) =>
    {
      if( props.recursion_level > 1 )
      {
        return (
          <ol>
            {props.children}
          </ol>
        );
      }
      else {
        return (
          <React.Fragment>
            {props.children}
          </React.Fragment>
        );
      }
    }

    if( this.props.recursion_level > 3 ) {
      return <div> End recursion on {this.props.recursion_level}... </div>
    }

    return (
      <ListElements>
        <div> recursion_level {this.props.recursion_level + 1} <br /> </div>
        <TreeComponent key={0} recursion_level={ this.props.recursion_level + 1 }/>
      </ListElements>
    )
  }
}

interface AppProps {
}

interface AppState {
}

class App extends React.Component<AppProps, AppState>
{
  private recursion_level: number;

  constructor(props: AppProps) {
    super(props);

    this.recursion_level = 0;
    this.state = {
    };
  }

  render() {
    console.log( 'I was triggered during App render:', this.state )

    return (
        <TreeComponent key={0} recursion_level={ this.recursion_level }/>
    )
  }
}

export default App;

--

Property 'children' does not exist on type 'TreeComponentProps'.  TS2339

    27 |         return (
    28 |           <ol>
  > 29 |             {props.children}
       |                    ^
    30 |           </ol>
    31 |         );
    32 |       }

如果我替换该行:

const ListElements: React.FunctionComponent<TreeComponentProps> = (props: TreeComponentProps) =>
// -->
const ListElements: any = (props: any) =>

然后,一切正常,页面生成正确:

recursion_level 1
recursion_level 2
recursion_level 3
recursion_level 4
End recursion on 4...

我已经研究了如何在TypeScript中使用带有React无状态函数组件的子级,并相应地解决了这个问题?这是正确的语法:

自React 16.8以来,名称React。证监会作出反应。无状态部件已被润滑。实际上,它们已成为React的别名。功能组件类型或反应。简称FC

不过,您可以使用相同的方法:

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

我如何正确设置我的内部函数道具类型的打字稿,而不必一直使用任何地方?


共1个答案

匿名用户

您不需要显式声明MyStatelessComponent的类型,因为它可以推断出来。

另外,由于在第二个TreeComponent声明中未使用children,因此需要将children标记为可选以删除类型错误。

您还缺少liselements组件的proprecursion\u level={this.props.recursion\u level}

import React from 'react';
import './App.css';

interface TreeComponentProps {
  recursion_level: number;
  children?:React.ReactNode
}

interface TreeComponentState {
}

class TreeComponent extends React.Component<TreeComponentProps, TreeComponentState>
{
  constructor(props: TreeComponentProps) {
    super(props);
    this.state = {
    };
  }

  render() {
    console.log( 'I was triggered during TreeComponent render...' );

    // const ListElements: any = (props: any) =>
    const ListElements = (props: TreeComponentProps) =>
    {
      if( props.recursion_level > 1 )
      {
        return (
          <ol>
            {props.children}
          </ol>
        );
      }
      else {
        return (
          <React.Fragment>
            {props.children}
          </React.Fragment>
        );
      }
    }

    if( this.props.recursion_level > 3 ) {
      return <div> End recursion on {this.props.recursion_level}... </div>
    }

    return (
      <ListElements recursion_level={this.props.recursion_level}>
        <div> recursion_level {this.props.recursion_level + 1} <br /> </div>
        <TreeComponent key={0} recursion_level={ this.props.recursion_level + 1 }/>
      </ListElements>
    )
  }
}

interface AppProps {
}

interface AppState {
}

class App extends React.Component<AppProps, AppState>
{
  private recursion_level: number;

  constructor(props: AppProps) {
    super(props);

    this.recursion_level = 0;
    this.state = {
    };
  }

  render() {
    console.log( 'I was triggered during App render:', this.state )

    return (
        <TreeComponent key={0} recursion_level={ this.recursion_level }/>
    )
  }
}

export default App;