首页 前端 TypeScript 正文

React技巧之将函数作为props传递


原文链接:https://bobbyhadz.com/blog/react-typescript-pass-function-as-prop

作者:Borislav Hadzhiev

正文从这开始~

总览

在React TypeScript中将函数作为props传递:

  1. 在组件的接口中为函数属性定义一个类型。

  2. 在父组件中定义函数。

  3. 将函数作为prop传递给子组件。

// App.tsx

interface ButtonProps {
  sum: (a: number, b: number) => number;
  logMessage: (message: string) => void;

  // ?️ turn off type checking
  doSomething: (params: any) => any;
}

function Container({sum, logMessage, doSomething}: ButtonProps) {
  console.log(sum(10, 15));

  logMessage('hello world');

  doSomething('abc');

  return <div>Hello world</div>;
}

const App = () => {
  const sum = (a: number, b: number) => {
    return a + b;
  };

  const logMessage = (message: string) => {
    console.log(message);
  };

  return (
    <div>
      <Container sum={sum} logMessage={logMessage} doSomething={logMessage} />
    </div>
  );
};

export default App;

详情

这个例子向我们展示了在使用TypeScript的情况下,如何将函数作为props传递给React组件。

函数sum接收两个类型为number的参数,并返回number类型。

函数logMessage 接收类型为string的参数,且没有返回值。

doSomething函数被用来展示,如果你不想将函数作为props传递时进行类型检查,你可以将其关闭。

any类型有效地关闭了类型检查,因此该函数可以被传递任何类型的参数,并且可以返回任何类型的值。如果使用类型别名进行类型声明,该语法依然奏效。

// App.tsx

type ButtonProps = {
  sum: (a: number, b: number) => number;
  logMessage: (message: string) => void;

  // ?️ turn off type checking
  doSomething: (params: any) => any;
};

非常重要的是,实际函数的类型要与我们在ButtonProps中指定的类型一致。如果不匹配,我们将得到一个类型检查错误。

一个比较常见的做法是,把事件处理函数作为props传递。

// App.tsx

type ButtonProps = {
  handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
};

function Container({handleClick}: ButtonProps) {
  return <div onClick={handleClick}>Hello world</div>;
}

const App = () => {
  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('element clicked');
  };

  return (
    <div>
      <Container handleClick={handleClick} />
    </div>
  );
};

export default App;

这个代码片断和之前的代码片断,唯一看起来不同的是event对象的类型。该类型根据元素和事件的不同而不同(如onChangeonClick等等)。

你可以在IDE中编写处理函数,并将鼠标悬停在event参数上来弄清楚event的类型。

// App.tsx

interface ButtonProps {
  handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}

function Container({handleClick}: ButtonProps) {
  // ?️ wrote event handler inline
  return <div onClick={event => console.log(event)}>Hello world</div>;
}

React技巧之将函数作为props传递  第1张

另一个弄清楚prop类型的好方法是,在IDE中右击它并点击 "Go to Definition(跳转到定义)"。

React技巧之将函数作为props传递  第2张

原文:https://juejin.cn/post/7099092030755700773
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/4892.html

相关推荐

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站