从 React 的组件中删除 :any答案

【问题标题】：Remove :any from component in React从 React 的组件中删除 :any
【发布时间】：2022-12-03 10:44:55
【问题描述】：

我从 React 开始。我正在尝试向我的组件发送一个 var 和函数。我知道使用 :any 是一种不好的做法，这就是为什么我想以正确的方式进行更改。

我正在做一个模式，我正在以这种方式将数据发送到我的组件。我正在使用useState

数据表.tsx

import { useEffect, useMemo, useState } from "react";
import Modal from "../modal/Modal";

const Datatable = () => {
 const [show, setShow] = useState<boolean>(false);
 
 return (
    <div>
      <Modal show={show} closeModal={() => setShow(false)} />
      <button onClick={() =>setShow((s) => !s)}>
          Open Modal
      </button>

      <tableStuff/>
    <div/>
  );

模态.tsx

import "./modal.scss";
import React from "react";
import ReactDOM from "react-dom";

const Modal = (props:any) => {

  const portal = document.getElementById("portal");
  if (!portal) {
    return null;
  }
  if (!props.show) {
    return null;
  }
  return ReactDOM.createPortal(
    <>
      <div className="modal" onClick={props.closeModal}>
        <div className="content">
          <h2>Simple modal</h2>
        </div>
      </div>
    </>,
    portal
  );
};

export default Modal;

我已经在大量视频中看到过这一点，但以下代码对我不起作用。

我收到此错误 Binding element 'show' implicitly has an 'any' type 和 Binding element 'closeModal' implicitly has an 'any' type

//...
const Modal = ({show, closeModal}) => {
 if (show) {
    return null;
  }
//...
  return ReactDOM.createPortal(
    <>
      <div className="modals" onClick={closeModal}>      
          <button onClick={closeModal}>Close</button>
        </div>
    </>,
    portal
  );
}

为了不使用(props:any)，我还缺少其他东西吗？任何帮助或建议都会很好。

【问题讨论】：

标签： javascript reactjs typescript react-props react-component

【解决方案1】：

interface ModalProps {
  show: boolean;
  closeModal: () => void;
}

const Modal = ({show, closeModal}: ModalProps) => {

【讨论】：