ReactJS | 將函數Component更改為基於Class的ref錯誤

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
};