React Typescript:可选函数不是未定义的

Question

我正在构建一个React功能组件，我的组件应该提供一个可选的功能道具。如果提供了这个道具/函数，我想渲染一些东西，并启用组件上的点击。

export type AvatarProps = {
onEdit?: () => void;
};
const Avatar: FunctionComponent<AvatarProps> = (props: AvatarProps) => {
props.onEdit && (console.log("test");

不幸的是，该函数总是被考虑并且从来没有定义过，尽管我没有提供它。

在Google Chrome React插件中，它注意到函数为onEdit: {actionHandler(){}如果没有提供函数。如果我提供了这个函数，Add-on就会注意到onEdit：{{}

如何正确检查是否提供了函数

编辑:我目前正在测试Storybook:

import React from 'react';
import { Story } from '@storybook/react';
import Avatar, { AvatarProps } from './Avatar';
export default {
title: 'Avatar',
component: Avatar,
};
const Template: Story<AvatarProps> = args => <Avatar {...args} />;
export const Editable = Template.bind({});
Editable.args = {
onEdit: () => {
console.log('test');
},
};
export const NotEditable = Template.bind({});
NotEditable.args = {
};

Answer 1

在您的Storybook参数下，您可以设置argTypesRegex: null来防止这种默认行为。

export default {
parameters: {
actions: {
argTypesRegex: null,
},
}
}

• 相关GitHub问题