Как заставить функциональный компонент реагировать и использовать деструктивное назначение? (Я написал некоторый код, но не работает) - PullRequest
Новая
       10

Как заставить функциональный компонент реагировать и использовать деструктивное назначение? (Я написал некоторый код, но не работает)

0 голосов
/ 23 апреля 2020

Как превратить это в деструктивное задание?

, потому что оно продолжает давать мне ошибку

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;

Мне сказали написать код, подобный этому

Ответы [ 3 ]

0 голосов
/ 23 апреля 2020

Вам не нужно запускать вашу функцию везде, где она использовалась. также вы можете использовать деструктивное назначение в параметре компонента функции. 

import React from "react";

import "../assets/stylesheets/BackDrop.css";

export default function BackDrop({ onClickBackDrop }) {
  return <div className="cs-backdrop" onClick={onClickBackDrop} />;
}
0 голосов
/ 23 апреля 2020

Объявите (props: {onClickBackDrop: () => void}) или ({onClickBackDrop}:{onClickBackDrop: () => void}). Вы можете пропустить аннотацию типа, но это плохо в машинописи.

и вы, вероятно, захотите использовать 

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

или 

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

Пожалуйста, игнорируйте мои исправления, если onClickBackDrop действительно возвращает другая функция.

0 голосов
/ 23 апреля 2020

Вы можете сделать это следующим образом: 

import React from "react";


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