反应JS |将函数组件更改为基于类的引用错误

Posted 2023-02-23

【中文标题】反应JS |将函数组件更改为基于类的引用错误

【英文标题】：ReactJS | Change function Component into Class based one for ref error

【发布时间】：2019-05-26 14:27:03

【问题描述】：

我在 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。我广泛使用这个组件，我想停止在任何地方看到这个错误......

【参考方案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
;