获取React.createElement：替换select-react中的组件时类型无效

Question

我正在使用es6类和react-select创建一个下拉菜单，并希望替换react-select菜单图标的组件。我的方法是静态的，所以我希望能够通过使用类名调用它们来使用它们，在本例中为CustomSelectDropDown，但我不断收到此错误：

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：。您是否意外导出了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;

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

如果我试图改变DropdownIndicator的调用this.CaretDownIcon()而不是CustomSelectDropDown.CaretDownIcon()，那么我得到以下不同的错误，如下所示，但我认为使用this.CaretDownIcon()应该是正确的方法。

未捕获的不变违规：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查Select的渲染方法。

也许这与react-select比JS/reactjs/es6做得更多？

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方法吗？或者这些位只在我的类中是必需的？”