Question

我正在使用es6类和react-select创建一个下拉菜单，并希望替换react-select菜单图标的组件。我的方法是静态的，因此我希望能够通过使用类名（在这种情况下为CustomSelectDropDown来调用它们）来使用它们，但是我仍然遇到此错误：

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（用于复合组件）但得到：。您是否意外导出了JSX文字而不是组件？在Select中（由StateManager创建）

我的代码如下：

import React, { Component } from 'react';
import Select, { components } from 'react-select';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faCaretDown);

export class CustomSelectDropDown extends Component {
    static Placeholder(props) {
        return <components.Placeholder {...props} />;
    }

    static CaretDownIcon () {
        return <FontAwesomeIcon icon="caret-down" />;
    };

    static DropdownIndicator(props) {
        return (
            <components.DropdownIndicator {...props}>
                { this.CaretDownIcon() }
            </components.DropdownIndicator>
        );
    };

    render() {
        return (
            <div className="customSelect" id={this.props.idName}>
                <div className="fb--w60">
                    <Select 
                        ...
                        components={{ 
                            Placeholder: CustomSelectDropDown.Placeholder(), 
                            DropdownIndicator: CustomSelectDropDown.DropdownIndicator() }}
                        ...
                    />
                </div>
            </div>
        );
    }
}

export default CustomSelectDropDown;

我做错了什么？我认为这是使用static方法的proper way。

如果我尝试将DropdownIndicator的呼叫this.CaretDownIcon()更改为CustomSelectDropDown.CaretDownIcon()，则会收到以下不同的错误，如下所示，但我认为使用{{1} }应该是正确的方法。

未捕获的不变变量：元素类型无效：预期a 字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查this.CaretDownIcon()的渲染方法。

也许Select比react-select做的更多？

Answer 1

首先，我不知道您的组件是否需要static方法。它们不必是组件的属性，而只需要对类本身可用。您甚至可能希望将它们一起定义在class定义之外，这样就不能以任何方式公开访问它们。

const CaretDownIcon = () => <FontAwesomeIcon icon="caret-down" />;

// ...other definitions

export class CustomSelectDropDown extends Component {
  // ...
  render() {
    // ... getting whatever prop and state values you need
    return (
      <Select
        {...otherProps}
        components={{
          Placeholder: MyPlaceholder,
          // ... etc, etc
        }}

第二，在您要做的所有事情都放在标记中之后，您正试图在CustomDropdownIndicator中使用方法插入React组件。

const CustomDropdownIndicator = (props) => (
  <components.DropdownIndicator {...props}>
    <CaretDownIcon />
  </components.DropdownIndicator>
);

我认为您的问题不在于如何调用静态方法。 ClassWithStaticMethod.staticMethod()或this.constructor.staticMethod()是正确的语法。我认为您的问题是您试图在components配置中调用该方法，而不是简单地将那些无状态组件传递到配置中。

<Select 
  ...
  components={{ 
    Placeholder: CustomSelectDropDown.Placeholder, 
    DropdownIndicator: CustomSelectDropDown.DropdownIndicator 
  }}
  ...
/>

也就是说，可以在没有类的实例的情况下在类上调用静态方法，因此问题再次变为“这真的是static方法吗？或者这些位仅在我的类中是必需的？ “

在选择反应中替换组件时，获取React.createElement：类型无效

1 个答案: