ReactJS |Заменить функцию компонента на классовую для ссылки на ошибку

Question

У меня есть этот выпадающий компонент функции в React.Он может быть использован повторно и выдает ошибку, подобную этой.

    Warning: Function components cannot be given refs. Attempts to access this ref will fail.

Мне нужно преобразовать его в компонент на основе классов.Но я бью стену.Это основанный на классе, и ниже того, что я сделал.Не могли бы вы указать мне на мою, безусловно, глупую ошибку?

    import React from 'react';
    import PropTypes from 'prop-types';
    import { toClass } from 'recompose';
    import Dropdown from 'react-bootstrap/lib/Dropdown';
    import DropdownButton from 'react-bootstrap/lib/DropdownButton';
    import SplitButton from 'react-bootstrap/lib/SplitButton';

    const { Item, Divider, Toggle, Button, Menu } = Dropdown;

    export { Item, Divider, Toggle, Button, Menu, DropdownButton, SplitButton, Dropdown };

    const CustomDropdown = ({ title, size, variant, customToggle, children, ...props }) => (
      <Dropdown {...props}>
        <Toggle size={size} variant={variant} as={customToggle}>
          {title}
        </Toggle>
        <Menu>{children}</Menu>
      </Dropdown>
    );

    CustomDropdown.defaultProps = {
      title: '',
      variant: 'primary',
      size: 'sm',
      drop: 'down',
      customToggle: toClass(props => <Toggle {...props} />)
    };

    CustomDropdown.propTypes = {
      title: PropTypes.string,
      variant: PropTypes.string,
      size: PropTypes.string,
      drop: PropTypes.string,
      customToggle: PropTypes.func
    };

    export default CustomDropdown;

А вот мое преобразование, которое не работает.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { toClass } from 'recompose';
import Dropdown from 'react-bootstrap/lib/Dropdown';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import SplitButton from 'react-bootstrap/lib/SplitButton';

export class CustomDropdown extends Component {
  static propTypes = {
    title: propTypes.string,
    variant: propTypes.string,
    size: propTypes.string,
    drop: propTypes.string,
    customToggle: propTypes.func
  };

  static defaultProps = {
    title: '',
    variant: 'primary',
    size: 'sm',
    drop: 'down',
    customToggle: toClass(props => <Toggle {...props} />)
  };

  render() {
    const { title, size, variant, customToggle, children, ...props } = this.props;
    const { Item, Divider, Toggle, Button, Menu } = Dropdown;

    return (
      <div>
        <Dropdown {...props}>
          <Toggle size={size} variant={variant} as={customToggle}>
            {title}
          </Toggle>
          <Menu>{children}</Menu>
        </Dropdown>
      </div>
    )
  }
}

export default CustomDropdown;

Проблема в том, что в настоящее время я не использую некоторыеименованные экспорты, а также DropdownButton и SplitButton.Я использую этот компонент экстенсивно, и я хотел бы прекратить видеть эту ошибку везде ....

Answer 1

Компонент класса CustomDropdown может деструктурировать только те свойства, на которые ссылается его метод render.

const { Toggle, Menu } = Dropdown;

Также его определения propTypes должны приводить к TypeErrors как func иstring не являются свойствами propTypes, а скорее PropTypes

static propTypes = {
  title: PropTypes.string,
  variant: PropTypes.string,
  size: PropTypes.string,
  drop: PropTypes.string,
  customToggle: PropTypes.func
};