Question

如何在React Typescript中为事件定义可选的回调？

interface Props{
    data: any
    handleClick?: ()=>void
}

const FunctionalComponent: React.StatelessComponent<Props> = (props) => {

    return (
        <React.Fragment>
            {props.data}
            <div onClick={() => props.handleClick()}>optional Click Event</div>
        </React.Fragment>
    )
}

我在其中使用此组件的类：

   class HandlerComponent extends React.Component<Props, State>{
        constructor(props){
            super(props)
                this.state = {
                     data: this.props.data
                }
            }
            render() {
                return (
                    <React.Fragment>

                        <FunctionalComponent data={this.state.data} />

                    </React.Fragment>
                )
            }
        }

我在onClick = {（）=> props.handleClick（）}时出错：

[ts] Cannot invoke an object which is possibly 'undefined'.

Answer 1

问题在于，由于该属性是可选的（并且您已启用strictNullChecks），Typescript将迫使您确保handleClick实际上不是未定义的。

最简单的解决方案是使用&&运算符进行检查：

    <React.Fragment>
        {props.data}
        <div onClick={() => props.handleClick && props.handleClick()}>optional Click Event</div>
    </React.Fragment>

在Typescript React中声明可选的事件回调

1 个答案: