如何使中的功能组件反应并使用破坏性赋值?(我写了一些代码，但没有工作)

Question

如何将其转化为破坏性赋值？

因为它一直给我的错误

Binding element 'onClickBackDrop' implicitly has an 'any' type.ts(7031)

我不确定我做错了什么

import React from "react";
import "../assets/stylesheets/BackDrop.css";
export default function BackDrop(props: any) {
const {onClickBackDrop()} = props;
return <div className="cs-backdrop" onClick={props.onClickBackDrop()} />;
}

import React, { FC } from 'react'
interface BackDropProps  { 
onClickBackDrop: Function 
}
const BackDrop: FC<BackDropProps> = (props) => {
const { onClickBackDrop } = props;
return (
<div className="cs-backdrop" onClick={()=>onClickBackDrop()} />
)
}

export default BackDrop;

我被告知要写这样的代码

Answer 1

您不需要在函数使用的任何地方运行函数。也可以在函数组件参数中使用破坏性赋值。

import React from "react";
import "../assets/stylesheets/BackDrop.css";
export default function BackDrop({ onClickBackDrop }) {
return <div className="cs-backdrop" onClick={onClickBackDrop} />;
}

Answer 2

声明(props: {onClickBackDrop: () => void})或({onClickBackDrop}:{onClickBackDrop: () => void})。您可以省略类型注释，但在typescript中是不好的。

你可能想使用

<div ... onClick={onClickBackDrop} />

或

<div ... onClick={() => onClickBackDrop()} />

如果onClickBackDrop确实返回了另一个函数，请忽略我的更正。

Answer 3

您可以这样做：

import React from "react";

export default function BackDrop({ onClickBackDrop }) {
return <div className="cs-backdrop" onClick={onClickBackDrop()} />;
}