PropType可用于反应组件

Question

我有以下通用组件

import PropTypes from 'prop-types';
import Input from '../component/Input'; //internal component 
const CustomInput = props => {
const { label, updateInputField } = props;
return (
<Input
label={label}
changeField={updateInputField}
)
}
CustomInput.propTypes = {
label: PropTypes.string,
updateInputField: PropTypes.func
}
export default CustomInput;

现在我在下面的几个地方使用这些组件

<CustomInput 
label="401Balance"
updateInputField={inputFieldHandler}
/>

所以这个有效。。但是有些地方我没有使用updateInputField作为道具。例如

<CustomInput 
label="savingsBalance"
/>

我如何不通过道具，并确保它不会失败。有人能提出建议吗。

Answer 1

如果没有传递函数，您可以设置一个默认值来保护案例：

const { label, updateInputField = () => {} } = props;

或者(可能是更好的方法(-创建一个单独的函数并添加一个简单的条件：

const CustomInput = props => {
const { label, updateInputField } = props;
const fn = () => {
if (updateInputField) {
updateInputField();
}
};
return (
<Input
label={label}
changeField={fn}
/>
);
}