如何在React中正确创建共享组件?

问题描述 投票:0回答:1

我有一个带有搜索表单的课程:

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中将所有道具声明为字符串,并根据默认值将它们匹配为“不需要”

reactjs
1个回答
1
投票

您可以为类组件初始化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',
};
© www.soinside.com 2019 - 2024. All rights reserved.