首页  >  问答  >  正文

翻译:React - TypeScript对props进行解构赋值

<p>我有个函数</p> <pre class="brush:php;toolbar:false;">export function getSubjectsForStudent(data: any) : any[]</pre> <p>"data argument" 是我从外部来源接收到的,定义强类型并不可行。"return" 是根据 "data" 推导出来的,所以它也是 any 类型。<br /><br />一个 "Main" 组件将 "return" 传递给一个 "child" 组件,像这样:</p><p><br /></p> <pre class="brush:php;toolbar:false;"><MainCategories subjects={getSubjectsForStudent(data)} /></pre> <p>而在 MainCategories 组件中,</p> <pre class="brush:php;toolbar:false;">export default function MainCategories(props: any) { const tmp = props.subjects; ...</pre> <p>翻译:它可以工作,没问题。</p><p>但是我想要:</p><p>export default function MainCategories( {subjects} ) {</p><p>有人可以帮助吗?</p><p><br /></p>
P粉071602406P粉071602406472 天前471

全部回复(2)我来回复

  • P粉579008412

    P粉5790084122023-07-28 12:34:25

    你需要添加一个 Props 的类型或接口,然后你就可以通过解构来获取 subjects。

    interface Props {
      subjects: any
    }
    
    export default function MainCategories({ subjects }: Props) {
        const tmp = props.subjects;
        ...

    回复
    0
  • P粉155710425

    P粉1557104252023-07-28 00:35:26

    我经常使用这种模式来实现这个,但主要的关键是定义props。

    import { FunctionComponent } from 'react';
    
    interface Props {
      // In your case
      subjects: any
    }
    
    const MainCategories: FunctionComponent<Props> = ({subjects}) => (
      ...
    );
    
    export default MainCategories;

    回复
    0
  • 取消回复