使用 TypeScript 在 React 中传递函数

2019-02-06 08:00:00 · 飞浪

介绍如果您不熟悉TypeScript或React，您可能不太清楚如何将函数传递给按钮或其他组件以更改当前组件的状态。由于JavaScript的“this”绑定，这可能会变得非常混乱。本

介绍

如果您不熟悉 TypeScript 或 React，您可能不太清楚如何将函数传递给按钮或其他组件以更改当前组件的状态。由于 JavaScript 的“this”绑定，这可能会变得非常混乱。本指南将向您展示 TypeScript 如何简化此操作。在此过程中，我们将构建一个简单的应用程序来更改带有按钮的框的颜色和文本。这对于想知道学生是否理解材料的老师来说很有用。

定义 TypeScript 函数

下面是如何创建供用户点击的切换按钮的示例。

      import * as React from 'react';

interface ToggleProps {
    ClickHandler: (event: React.MouseEvent<HTMLButtonElement>) => void
}

export function Toggle(Props: ToggleProps) {
    return <button onClick={Props.ClickHandler}>Toggle</button>
}
    

在这个组件中，我们创建一个接口，定义 Toggle 组件应接收哪种类型的 props。我们只期望一个名为 ClickHandler 的 prop。它接受一个函数并返回 void。作为示例参考，ClickHandler prop 函数当前设置为接收应用于 HTMLButtonElement 的 React.MouseEvent 类型的事件参数。每当您用鼠标单击 JavaScript 中的元素时，它都会默认接收此事件属性。在我们的示例中，我们不需要它。如果您确实需要有关鼠标单击事件的信息，这就是让 TypeScript 知道事件类型和单击元素类型的方法。

添加组件以使用切换按钮

接下来，我们需要将 Toggle 按钮导入到我们计划使用的组件中。我们将其称为 StatusCard 组件。

      import * as React from 'react';
import { Toggle } from '../Toggle';

interface StatusCardProps {
    DefaultStatus: StatusTypes
}

interface StatusCardState {
    Status: StatusTypes
}

type StatusTypes = "Good" | "Slow Down" | "Stuck";

export default class StatusCard extends React.Component<StatusCardProps, StatusCardState> {

    static defaultProps = {
        DefaultStatus: "Good"
    }

    state = {
        Status: this.props.DefaultStatus
    }

    toggleClickHandler = () => {
        this.setState((prevState) => {
            if (prevState.Status === "Good") {
                return { Status: "Stuck" };
            }
            if (prevState.Status === "Slow Down") {
                return { Status: "Good" };
            }
            return { Status: "Slow Down" };
        })
    }

    getColor() {
        if (this.state.Status === "Good") {
            return "#0F0";
        }
        if (this.state.Status === "Slow Down") {
            return "#f4cf53";
        }
        return "#F00";
    }

    render() {
        return (
            <>
                <div
                    style={{
                        background: this.getColor(),
                        color: "#000",
                        height: "200px",
                        width: "200px",
                    }}>
                    {this.state.Status}
                </div>
                <Toggle ClickHandler={this.toggleClickHandler} />
            </>
        )
    }
}
    

让我们从顶部开始分解一下。

首先，我们声明组件的 props 和状态接口，这样 TypeScript 就知道这个组件应该接收什么类型的 props 以及它跟踪什么类型的状态。

在我们的 React 组件中，您会注意到一个特殊的静态 defaultProps 属性，它允许我们告诉 TypeScript 哪些 props 不是必需的，并且具有默认设置。您可以在TypeScript 的文档中阅读有关为 React 设置默认 props 的更多信息。

然后我们设置默认组件状态。

下一个方法是我们的 toggleClickHandler。此方法包含我们想要在单击 ToggleButton 组件时发送给它的逻辑。它将改变此组件的状态。需要注意的重要部分是使用箭头方法来创建函数。这会自动将 JavaScript 的“this”绑定到 StatusCard 组件。如果没有它，当我们调用 this.setState 时，JavaScript 会查找被单击的实际按钮的状态。

您可以在不使用箭头函数的情况下执行此操作，但它会增加更多语法。您有两个备选方案。两者都需要使用 JavaScript 的 bind 方法。

您可以在类构造函数中添加this.toggleClickHandler = this.toggleClickHandler.bind(this); 。

您还可以将this.toggleClickHandler.bind(this)传递到 Toggle Button Component ClickHandler prop 中。

为了完成我们的组件，有一个简单的 getColor 方法可以根据应用程序的状态显示不同的颜色和文本。最后是我们的 render 方法。render 方法显示我们的组件和 Toggle 按钮组件。在这里，我们可以将 toggleClickHandler 作为属性传递给我们的 Toggle 组件。

结论

本指南介绍了如何将切换按钮类型的组件与各种其他组件配合使用。每个组件都可以告诉切换按钮在被点击时要做什么。

需要注意的是，在上面的例子中，您可以使用普通按钮组件，而不是创建环绕按钮的特殊 Toggle 组件。在将我们的 toggleClickHandler 方法传递给多个组件时，Toggle 组件会显示额外的复杂性。在本例中，我们的 toggleClickHandler 会传递给 Toggle 组件。然后 Toggle 组件将其传递给普通按钮组件。在整个过程中，我们的 toggleClickHandler 在更改状态时将保持与 StatusCard 组件的连接。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 TypeScript 在 React 中传递函数

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import * as React from 'react'; interface ToggleProps { ClickHandler: (event: React.MouseEvent<HTMLButtonElement>) => void } export function Toggle(Props: ToggleProps) { return <button onClick={Props.ClickHandler}>Toggle</button> }

import * as React from 'react'; import { Toggle } from '../Toggle'; interface StatusCardProps { DefaultStatus: StatusTypes } interface StatusCardState { Status: StatusTypes } type StatusTypes = "Good" | "Slow Down" | "Stuck"; export default class StatusCard extends React.Component<StatusCardProps, StatusCardState> { static defaultProps = { DefaultStatus: "Good" } state = { Status: this.props.DefaultStatus } toggleClickHandler = () => { this.setState((prevState) => { if (prevState.Status === "Good") { return { Status: "Stuck" }; } if (prevState.Status === "Slow Down") { return { Status: "Good" }; } return { Status: "Slow Down" }; }) } getColor() { if (this.state.Status === "Good") { return "#0F0"; } if (this.state.Status === "Slow Down") { return "#f4cf53"; } return "#F00"; } render() { return ( <> <div style={{ background: this.getColor(), color: "#000", height: "200px", width: "200px", }}> {this.state.Status} </div> <Toggle ClickHandler={this.toggleClickHandler} /> </> ) } }