Question

我希望能够从子组件中调用函数printUrl。我正在名为theurl的prop中传递函数，我不知道如何声明此prop类型，我无法在孩子的界面中将其保留为any，然后当我调用{{1}没有任何记录。我期望父函数printUrl('testing')注销printUrl

我感到自己完全误解了如何传递价值。我得到的错误是testing

Unhandled Rejection (ReferenceError): printUrl is not defined

孩子就像...

import React from 'react';
import { Child } from './child';

const Parent: React.FC = () => {
    const printUrl = (arg: string) => {
        console.log(arg)
    }
    return (
    <Child theurl={printUrl}/>
    )
}

Answer 1

在<Child theurl={printUrl}/>处传递道具时， printUrl重命名为theurl 。因此，在子组件中，您需要通过theurl的名称进行访问。

因此，您需要通过theurl('testing')访问它，它应该可以正常工作。

希望有帮助！

编辑：根据讨论修改答案。您可以在组件中以props.theurl的身份访问它：

const Child: React.FC<PropsInterface> = (props: PropsInterface) => {
 props.theurl('testing')
}

Answer 2

printUrl被分配给子成员theurl。在孩子中，您要像这样引用它：

const Child: React.FC<PropsInterface> = (props: PropsInterface) => {
 props.theurl('testing')
}

您也可以强烈键入theurl作为函数：

interface PropsInterface {
  theurl: (url:string) => void;
}

Child隐式返回void，它不能是React组件的返回类型。 null是：

const Child: React.FC<PropsInterface> = (props: PropsInterface) => {
 props.theurl('testing'); return null;
}

将功能道具命名为动词是一个好习惯。

import React from 'react';

interface PropsInterface {
  printUrl: (url:string) => void;
}

const Child: React.FC<PropsInterface> = (props: PropsInterface) => {
  props.printUrl("testing"); return null;
}


const Parent: React.FC = () => {
    const printUrl = (arg: string) => {
        console.log(arg)
    }
    return (
    <Child printUrl={printUrl}/>
    )
}

祝您打字稿历险！

React Typescript：将值从子级传递到父级

2 个答案: