React-typescript:无法调用可能为'；未定义'；

我正在创建一个警报组件。对于样式，我使用样式组件。对于typescript，我放置了道具

any

。我的警报组件工作正常。还有它。一旦我添加了界面道具，我就会犯很多错误。第一个错误是

无法调用可能“未定义”的对象。

这是我使用警报组件的父组件。

 <button
        style={{ color: "red" }}
        onClick={() =>
          Alert({
            id: "sign-in-fail-alert",
            title: "Good Job!",
            alertType: "success",
            onConfirm: () => setValue("click"),
            children: <div>You clicked the button! </div>
          })
        }
      >
        Show alert!
      </button>

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { Button } from "components/buttons";
import { CloseIcon } from "assets/icons";
export const Container = styled.div`
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000e0;
  position: fixed;
  z-index: 3;
  display: flex;
  flexdirection: row;
  justifycontent: center;
  alignitems: center;
  aligncontent: center;
`;
export const ModalOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  z-index: 1;
`;
export const ModalClose = styled.button`
  position: absolute;
  top: 20px;
  right: 20px;
  transition: transform 250ms ease-in-out;
  transform-origin: 50% 50%;
  &:hover {
    transform: rotate(180deg);
  }
`;
export const IconContainer = styled.div`
  position: relative;
  z-index: 2;
  top: 6%;
  left: 47%;
  box-sizing: content-box;
  border-radius: 50%;
`;
export const ModalBox = styled.div`
  position: relative;
  width: 40%;
  padding: 1.25em;
  border: none;
  margin: 10% 10% 10% 25%;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: white;
  cursor: auto;
  z-index: 2;
`;
export const Confirm = styled(Button)`
  position: relative;
  top: 100%;
  left: 50%;
`;
export const Title = styled.h1`
  position: relative;
  top: 40%;
  font-size: 50px;
  text-align: center;
  color: ${({ theme }) => theme.textColor};
`;

export const Children = styled.h1`
  position: relative;
  top: 40%;
  font-size: 20px;
  text-align: center;
  color: ${({ theme }) => theme.textColor};
`;

export interface IModal {
  title: string;
  onClose?: () => void;
  onCancel?: () => void;
  onConfirm?: () => void;
  children?: JSX.Element | string;
  icon?: JSX.Element;
  alertType?: "success" | "error" | "warning" | "info" | "question";
}
export const Modal = ({
  title,
  children,
  onClose,
  onCancel,
  onConfirm,
  icon,
  alertType
}:  IModal) => { // If I type any it works fine
  const handleCancel = () => {
    onCancel(); //Getting error from here
    onClose(); //Getting error from here
  };
  const handleConfirm = () => {
    onConfirm(); //Getting error from here
    onClose(); //Getting error from here
  };
  return (
    <Container>
      <ModalOverlay onClick={onClose} />
      <ModalBox>
        <ModalClose onClick={onClose}>
          <CloseIcon />
        </ModalClose>
        <Title>{title}</Title>
        <IconContainer>
          {icon ? (
            icon
          ) : alertType === "success" ? (
            <CloseIcon />
          ) : alertType === "error" ? (
            <p>error</p>
          ) : alertType === "warning" ? (
            <p>warning</p>
          ) : alertType === "info" ? (
            <p>info</p>
          ) : alertType === "question" ? (
            <p>question</p>
          ) : null}
        </IconContainer>
        <Children> {children}</Children>
        {onCancel && <Button onClick={handleCancel}>Cancel</Button>}
        {onConfirm && <Confirm onClick={handleConfirm}>Confirm</Confirm>}
      </ModalBox>
    </Container>
  );
};

export interface IAlert {
  title: string;
  children?: JSX.Element | string;
  id: string;
  alertType: string;
  onCancel?: () => void;
  onConfirm?: () => void;
}


export const Alert = ({
  title,
  children,
  id,
  alertType,
  onCancel,
  onConfirm
}: IAlert) => {
  // search the DOM for an element with the same ID and remove it
  const removeElement = () => document.getElementById(id)?.remove();
  const createElement = () => {
    const container = document.createElement(`div`);
    container.setAttribute(`class`, "alert");
    container.setAttribute(`id`, id);
    document.body.appendChild(container);
    ReactDOM.render(
      <Modal
        title={title}
        alertType={alertType}
        onCancel={onCancel}
        onConfirm={onConfirm}
        onClose={removeElement}
      >
        {children}
      </Modal>,
      container
    );
  };
  return createElement();
};

警觉的({
id:“登录失败警报”，
标题：“干得好！”，
alertType:“成功”，
onConfirm:（）=>setValue（“单击”），
孩子们：你点击了按钮！
})
}
>
保持警惕！

这是我的警报组件。在Alert组件中，我创建了模态，然后将其传递给Alert变量。我的警报变量的接口工作正常。我的模式界面出现错误。

 <button
        style={{ color: "red" }}
        onClick={() =>
          Alert({
            id: "sign-in-fail-alert",
            title: "Good Job!",
            alertType: "success",
            onConfirm: () => setValue("click"),
            children: <div>You clicked the button! </div>
          })
        }
      >
        Show alert!
      </button>

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { Button } from "components/buttons";
import { CloseIcon } from "assets/icons";
export const Container = styled.div`
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000e0;
  position: fixed;
  z-index: 3;
  display: flex;
  flexdirection: row;
  justifycontent: center;
  alignitems: center;
  aligncontent: center;
`;
export const ModalOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  z-index: 1;
`;
export const ModalClose = styled.button`
  position: absolute;
  top: 20px;
  right: 20px;
  transition: transform 250ms ease-in-out;
  transform-origin: 50% 50%;
  &:hover {
    transform: rotate(180deg);
  }
`;
export const IconContainer = styled.div`
  position: relative;
  z-index: 2;
  top: 6%;
  left: 47%;
  box-sizing: content-box;
  border-radius: 50%;
`;
export const ModalBox = styled.div`
  position: relative;
  width: 40%;
  padding: 1.25em;
  border: none;
  margin: 10% 10% 10% 25%;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: white;
  cursor: auto;
  z-index: 2;
`;
export const Confirm = styled(Button)`
  position: relative;
  top: 100%;
  left: 50%;
`;
export const Title = styled.h1`
  position: relative;
  top: 40%;
  font-size: 50px;
  text-align: center;
  color: ${({ theme }) => theme.textColor};
`;

export const Children = styled.h1`
  position: relative;
  top: 40%;
  font-size: 20px;
  text-align: center;
  color: ${({ theme }) => theme.textColor};
`;

export interface IModal {
  title: string;
  onClose?: () => void;
  onCancel?: () => void;
  onConfirm?: () => void;
  children?: JSX.Element | string;
  icon?: JSX.Element;
  alertType?: "success" | "error" | "warning" | "info" | "question";
}
export const Modal = ({
  title,
  children,
  onClose,
  onCancel,
  onConfirm,
  icon,
  alertType
}:  IModal) => { // If I type any it works fine
  const handleCancel = () => {
    onCancel(); //Getting error from here
    onClose(); //Getting error from here
  };
  const handleConfirm = () => {
    onConfirm(); //Getting error from here
    onClose(); //Getting error from here
  };
  return (
    <Container>
      <ModalOverlay onClick={onClose} />
      <ModalBox>
        <ModalClose onClick={onClose}>
          <CloseIcon />
        </ModalClose>
        <Title>{title}</Title>
        <IconContainer>
          {icon ? (
            icon
          ) : alertType === "success" ? (
            <CloseIcon />
          ) : alertType === "error" ? (
            <p>error</p>
          ) : alertType === "warning" ? (
            <p>warning</p>
          ) : alertType === "info" ? (
            <p>info</p>
          ) : alertType === "question" ? (
            <p>question</p>
          ) : null}
        </IconContainer>
        <Children> {children}</Children>
        {onCancel && <Button onClick={handleCancel}>Cancel</Button>}
        {onConfirm && <Confirm onClick={handleConfirm}>Confirm</Confirm>}
      </ModalBox>
    </Container>
  );
};

export interface IAlert {
  title: string;
  children?: JSX.Element | string;
  id: string;
  alertType: string;
  onCancel?: () => void;
  onConfirm?: () => void;
}


export const Alert = ({
  title,
  children,
  id,
  alertType,
  onCancel,
  onConfirm
}: IAlert) => {
  // search the DOM for an element with the same ID and remove it
  const removeElement = () => document.getElementById(id)?.remove();
  const createElement = () => {
    const container = document.createElement(`div`);
    container.setAttribute(`class`, "alert");
    container.setAttribute(`id`, id);
    document.body.appendChild(container);
    ReactDOM.render(
      <Modal
        title={title}
        alertType={alertType}
        onCancel={onCancel}
        onConfirm={onConfirm}
        onClose={removeElement}
      >
        {children}
      </Modal>,
      container
    );
  };
  return createElement();
};

从“React”导入React；
从“react dom”导入react dom；
从“样式化组件”导入样式化；
从“组件/按钮”导入{Button}；
从“资产/图标”导入{CloseIcon}；
export const Container=styled.div`
排名：0；
左：0；
右：0；
底部：0；
背景色：#000000e0；
位置：固定；
z指数：3；
显示器：flex；
方向：行；
论证内容：中心；
项目：中心；
内容：中心；
`;
export const ModalOverlay=styled.div`
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.8）；
光标：指针；
z指数：1；
`;
export const ModalClose=styled.button`
位置：绝对位置；
顶部：20px；
右：20px；
转换：转换250ms缓进缓出；
变换原点：50%50%；
&：悬停{
变换：旋转（180度）；
}
`;
导出常量IconContainer=styled.div`
位置：相对位置；
z指数：2；
最高：6%；
左：47%；
框大小：内容框；
边界半径：50%；
`;
export const ModalBox=styled.div`
位置：相对位置；
宽度：40%；
填充：1.25em；
边界：无；
利润率：10%10%10%25%；
框大小：边框框；
边界半径：10px；
背景色：白色；
光标：自动；
z指数：2；
`;
导出常量确认=样式化（按钮）`
位置：相对位置；
最高：100%；
左：50%；
`;
export const Title=styled.h1`
位置：相对位置；
最高：40%；
字体大小：50px；
文本对齐：居中；
颜色：${（{theme}）=>theme.textColor}；
`;
export const Children=styled.h1`
位置：相对位置；
最高：40%；
字体大小：20px；
文本对齐：居中；
颜色：${（{theme}）=>theme.textColor}；
`;
导出接口IModal{
标题：字符串；
onClose？：（）=>无效；
onCancel？：（）=>无效；
onConfirm？：（）=>无效；
子元素？：JSX.Element |字符串；
图标？：JSX.Element；
alertType？：“成功”|“错误”|“警告”|“信息”|“问题”；
}
导出常量模式=({
标题
儿童
一旦失去，
一旦取消，
onConfirm，
偶像
警报类型
}：IModal）=>{//如果我键入任何内容，它工作正常
常量handleCancel=（）=>{
onCancel（）；//从此处获取错误
onClose（）；//从此处获取错误
};
常量handleConfirm=（）=>{
onConfirm（）；//从此处获取错误
onClose（）；//从此处获取错误
};
返回(
{title}
{图标(
偶像
)：alertType==“成功”(
)：alertType==“错误”(
错误

)：alertType==“警告”(
警告

)：alertType==“信息”(
信息

)：alertType==“问题”(
问题:

)：null}
{儿童}
{onCancel&&Cancel}
{onConfirm&&Confirm}
);
};
导出接口IAlert{
标题：字符串；
子元素？：JSX.Element |字符串；
id：字符串；
报警类型：字符串；
onCancel？：（）=>无效；
onConfirm？：（）=>无效；
}
导出常量警报=({
标题
儿童
身份证件
警报类型，
一旦取消，
onConfirm
}：IAlert）=>{
//在DOM中搜索具有相同ID的元素并将其删除
常量removeElement=（）=>document.getElementById（id）？.remove（）；
常量createElement=（）=>{
const container=document.createElement（`div`）；
setAttribute（`class`，“alert”）；
container.setAttribute（`id`，id）；
文件.正文.附件（容器）；
ReactDOM.render(
{儿童}
,
容器
);
};
返回createElement（）；
};

您在类型上定义了可选的属性，这就是您获取编译器消息的原因。如果要删除

onCancel

和

onConfirm

属性后面的

？

，它们将不再是可选的，并且不会出现错误

export interface IAlert {
  title: string;
  children?: JSX.Element | string;
  id: string;
  alertType: string;
  onCancel: () => void;
  onConfirm: () => void;
}

如果可以更改接口，则至少必须在调用它们之前验证它们是否存在，例如：

const { onConfirm } = this.props;
onConfirm && onConfirm();

---

需要注意的一点是，

子属性是不必要的，它们是React组件的标准属性，因此无需定义您在类型上定义的可选属性，这就是您获取编译器消息的原因。如果要删除
onCancel
和
onConfirm
属性后面的
？
，它们将不再是可选的，并且不会出现错误

export interface IAlert {
  title: string;
  children?: JSX.Element | string;
  id: string;
  alertType: string;
  onCancel: () => void;
  onConfirm: () => void;
}

如果可以更改接口，则至少必须在调用它们之前验证它们是否存在，例如：

const { onConfirm } = this.props;
onConfirm && onConfirm();

需要注意的是，
子属性
不是必需的，它们是React组件的标准属性，因此无需定义这些属性
这些属性是可选的，这意味着它们可能未定义。我想使用属性作为可选属性。所以我可以根据我的警戒情况使用。如何使它们成为可选的并克服错误？
if（onCancel）{onCancel（）；}
谢谢ritaj。虽然我曾经<