Reactjs 我的组件中未定义handleActive函数

我有自定义输入组件

const CustomInput: React.FC<CustomInputProps> = ({ label, handleChange, handleActive, active, children, name, ...otherProps }) => {
    return (
        <IonItem lines='none'>
            {label && (
                <IonLabel
                    position='stacked'
                    className="store-input-label"
                >
                    {label}
                </IonLabel>
            )}

            <IonInput
                {...otherProps}
                name={name}
                onIonChange={handleChange}
                onIonFocus={() => handleActive(name)}
                className={`store-input ${active === name && 'store-input--active'}`}>
                {children}

            </IonInput>
        </IonItem>
    );
}

export default CustomInput;

我像这样消耗组件

        <CustomInput
         name='storeName'
         value={storeName}
         handleChange={handleChange}
         handleActive={(active: any) => setActive(active)}
         active={activeInput}
         placeholder='Please Input your store name'
         />

setActive（active）}
活动={activeInput}
占位符=“请输入您的店铺名称”
/>

但有时我不想指定活动和手动道具。像这样：

     <CustomInput
      value={userName}
      handleChange={(e: any) => setUserName(e.details.value)}
      >

setUserName（e.details.value）}
>

在这里，我没有指定活动道具和手动道具，但我得到了如下错误： handleActive不是一个函数

---

如何将此类可选功能作为道具传递

您可以使用条件检查道具是否传递：

onIonFocus={() => handleActive && handleActive(name)}

---

您可以使用条件检查传入或未传入的道具

handleActive

：

onIonFocus={() => handleActive && handleActive(name)}

---

你能分享你的

CustomInputProps

界面吗？@PriyankKachhela我已经更新了这个问题。您现在可以检查

CustomInputProps

，因此您将handleActive函数声明为可选函数，但您使用该函数时没有任何条件检查，这就是它显示错误的原因。在调用handleActive函数之前，您需要添加条件检查。您可以共享您的

CustomInputProps

界面吗？@PriyankKachhela我已经更新了问题。您现在可以检查

CustomInputProps

，因此您将handleActive函数声明为可选函数，但您使用该函数时没有任何条件检查，这就是它显示错误的原因。您需要在调用handleActive函数之前添加条件检查。这是一个好的做法吗！？我不熟悉这种部件。当然是第一次尝试。这是我所知道的最好的解决方案，这是一个很好的实践！？我不熟悉这种部件。当然是第一次尝试。这是我知道的最好的解决办法