Получение React.createElement: недопустимый тип при замене компонента в select-реагирует - PullRequest
Новая
       67

Получение React.createElement: недопустимый тип при замене компонента в select-реагирует

0 голосов
/ 26 февраля 2019

Я использую es6 классы и react-select для создания раскрывающегося меню и хочу заменить компонент для значка меню react-select.Мои методы являются статическими, поэтому я ожидаю, что смогу использовать их, вызывая их, используя имя класса, в данном случае CustomSelectDropDown, но я продолжаю получать эту ошибку:

React.createElement: typeневерно - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил:.Вы случайно экспортировали литерал JSX вместо компонента?in 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 методов.

Если я попытаюсь вместо этого изменить DropdownIndicator this.CaretDownIcon() на CustomSelectDropDown.CaretDownIcon(), то получуследующая другая ошибка, показанная ниже, но я думаю, что использование this.CaretDownIcon() должно быть правильным.

Uncaught Invariant Violation: Тип элемента недопустим: ожидается строка (для встроенных компонентов)или класс / функция (для составных компонентов), но получил: объект.Проверьте метод рендеринга Select.

Возможно, это связано с react-select больше, чем JS/reactjs/es6?

1 Ответ

0 голосов
/ 27 февраля 2019

Во-первых, я не знаю, что ваши компоненты должны быть 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 метод? Или эти биты необходимы только в моем классе?»

...