propTyping 在嵌套组件的每一层重复需要的属性是否有价值？

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

这取决于所有使用"Input"组件的组件。如果所有这些更高级别的组件都需要使用 "type" 属性，并且我假设它们需要，那么我会把属性放在 "Input" 组件中，因为它总是出现并且是一直在用。

即使你遇到这样的情况，例如，有 5 个组件使用 "Input" 组件，其中 2 个组件使用特定但相同的道具，我会把那个道具, 但没有 "isRequired" 属性。

Answer 2

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

在你的情况下 <Checkbox/> 不使用传递给它的任何道具，而只是将它们传递给 <Input/> 组件。因此，您不需要在 <Checkbox/> 中 propType、id 或 onChange，但在 <Input/> 中，您使用的是 onChange，因为您是渲染一个 <input/> 标签，有你应该提供给它的道具，所以你需要检查 propTypes

propTyping 在嵌套组件的每一层重复需要的属性是否有价值？

Is there value in propTyping repeated required properties at every level of nested components?

javascript

reactjs

react-proptypes

react-component