被传递的函数的 PropTypes

Question

根据下面的代码，我该如何设置 name、label 和 onChange 的 proptypes？

我当前的 proptypes 似乎不起作用。


function FilterCheckbox(props) {
    return (
        <div>
            <FormControlLabel
                control={
                    <Checkbox
                        onChange={props.bpmHandler ? props.bpmHandler : props.genreHandler}
                    />
                }
                name={props.name}
                label={props.label}
            />
            <p>name :{props.name}</p>
        </div>
    )
}

FormControlLabel.PropTypes = {
    control:PropTypes.shape({
        name:PropTypes.number,
        label:PropTypes.string
    })
}

export default FilterCheckbox

Answer 1

在您提供的代码中，FormControlLabel 似乎是在其他地方定义的组件。所以首先，它的道具类型应该是组件定义的地方，我假设看起来像这样：

FormControlLabel.propTypes = {
  control: PropTypes.element,
  name: PropTypes.string,
  label: PropTypes.string,
}

然后你有一个 Checkbox 组件，它也应该在定义组件本身的地方定义它的 prop 类型。它们可能看起来像这样：

Checkbox.propTypes = {
  onChange: PropTypes.func,
}

现在，在您展示的文件中，您正在定义 FilterCheckbox 并且您希望它接收适用于 FormControlLabel 和 Checkbox 的道具。所以我会这样做：

FilterCheckbox.propTypes = {
  name: FormControlLabel.propTypes.name,
  label: FormControlLabel.propTypes.label,
  bpmHandler: Checkbox.propTypes.onChange,
  genreHandler: Checkbox.propTypes.onChange,
}

并且如果您无权访问 Checkbox 和 FormControlLabel 的 prop 类型（这意味着您无法更改声明它们的文件以及声明它们的位置省略以添加道具类型）。您仍然可以根据您打算如何使用它来为 FilterCheckbox 编写道具类型：

FilterCheckbox.propTypes = {
  name: PropTypes.string,
  label: PropTypes.string,
  bpmHandler: PropTypes.func,
  genreHandler: PropTypes.func,
}

PS：以防万一这是给您带来麻烦的另一件事，它是 MyComponent.propTypes 而不是 MyComponent.PropTypes。

被传递的函数的 PropTypes

PropTypes for functions being passed down

reactjs

react-proptypes