时间戳

首页 > 解决方案 > 在 React 打字稿上将功能从一个组件传递到另一个组件的正确方法

reactjs - 在 React 打字稿上将功能从一个组件传递到另一个组件的正确方法

问题描述

我是打字稿的新手，在将父组件的功能作为道具传递给另一个组件时遇到问题，我在网上搜索但没有任何用处

作为参考，我在这里附上 JSX 代码，[TSX 是我想要的]

这是父组件

export default function Notification() {
    const [notification, setnotification] = useState(['alert', 'booking'])

    return (
        <div>
            <ShowNotification setnotification={setnotification} notification={notification} />
        </div>
    )
}

这是子组件

const ShowNotification = ({notification,setnotification}) => {
    notification.map((item, index) => {
        <li>item</li>
    })
}

对我来说主要问题是在打字稿中指定道具类型

标签： reactjsreact-typescript

解决方案

stackoverflow 的答案很少，这可能会对您有所帮助。

但总而言之，它就像传递其他普通道具一样。

这是可以帮助您理解的基本示例：

// button.tsx
interface IProps {
  children: React.FC | string;
  onClick: (e: any) => void;
  type: "button" | "reset";
}

const Button: React.FC<IProps> = (props) => {
  return (
    <button type={props.type} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

import Button from "./button";

export default function App() {
  const myFunction = (e: any) => {
    console.log("Event is: ", e);
  };

  return (
    <Button type="button" onClick={myFunction}>
      Click Me
    </Button>
  );
}

在这里，您可以看到，我已将 传递myFunction给Button组件作为道具，并从Button组件本身调用该方法，每当有人按下按钮时，它都会执行myFunction父App.tsx文件中的方法。

推荐阅读