我有一个带有搜索表单的课程:
class LocalSearch extends React.Component {
render() {
return (
<Container className="search-container pt-4">
<InputGroup className="mb-3">
<FormControl
placeholder="Search events"
aria-label="Search events"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button className="m-button">Find</Button>
</InputGroup.Append>
</InputGroup>
</Container>
);
}
}
我还将在其他页面中使用此组件。因此,我想创建一个与props多次使用的共享组件。这是我所做的:
class SearchForm extends Component {
render() {
const {
className, inputClassName, placeholder,
ariaLabel, ariaDescribedby, buttonClassName,
buttonName,
} = this.props;
return (
<Container className={className}>
<InputGroup className={inputClassName} />
<FormControl
placeholder={placeholder}
aria-label={ariaLabel}
aria-describedby={ariaDescribedby}
/>
<InputGroup.Append>
<Button className={buttonClassName}>{buttonName}</Button>
</InputGroup.Append>
</Container>
);
}
}
SearchForm.propTypes = {
className: PropTypes.string.isRequired,
inputClassName: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
ariaLabel: PropTypes.string.isRequired,
ariaDescribedby: PropTypes.string.isRequired,
buttonClassName: PropTypes.string.isRequired,
buttonName: PropTypes.string.isRequired,
};
我想我做错了。只是给我一个提示,告诉我如何改进我的代码。我也想要:-在共享组件类中将道具名称作为默认名称(因为每次都不传递它们)-在propTypes中将所有道具声明为字符串,并根据默认值将它们匹配为“不需要”
您可以为类组件初始化defaultProps
:
class SearchForm extends Component {
render() {
const {
className, inputClassName, placeholder,
ariaLabel, ariaDescribedby, buttonClassName,
buttonName,
} = this.props;
return (
<Container className={className}>
<InputGroup className={inputClassName} />
<FormControl
placeholder={placeholder}
aria-label={ariaLabel}
aria-describedby={ariaDescribedby}
/>
<InputGroup.Append>
<Button className={buttonClassName}>{buttonName}</Button>
</InputGroup.Append>
</Container>
);
}
}
SearchForm.defaultProps = {
className: 'default-input',
placeholder: 'Search',
};