javascript - propTyping 在嵌套组件的每一层重复需要的属性是否有值(value)？

Question

假设一个组件总是调用另一个组件，但添加了一些属性，即使在它调用的组件中检查了这些属性，您是否为该组件中的必需属性 propType？还是仅在更高级别？

简单示例:

const Input = props => {
    let finalProps = {
        ...props,
        ...{onChange: (e) => props.onChange(props.id, e.target.value)}
    };
    return <input {...finalProps}/>
};

Input.propTypes = {
    id: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string,
    tag: PropTypes.string
};
Input.defaultProps = {
    value: ''
};

const Checkbox = props => <Input {...props} type="checkbox"/>;

Checkbox.propTypes = {
    id: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired
};

在这个例子中，你会 propType "Checkbox"以及 "Input"还是只是为了 "Input"？

Answer 1

我的看法是，如果你在组件中使用一些 Prop ，你必须 propType它并定义相关的defaultProps .但是如果你不使用任何 Prop ，而你只是在没有访问它们的情况下传递它们，我就不会使用 propTypes或 defaultProps .

在你的情况下 <Checkbox/>不使用传递给它的任何 Prop ，而只是将它们传递给 <Input/>成分。因此你不需要 propType , id或 onChange在<Checkbox/> , 但在 <Input/>你正在使用 onChange并且由于您正在渲染 <input/>标签，有你应该提供给它的 Prop ，所以你需要检查 propTypes