С использованием миксинов реактивного компонента в стиле es6

Question

Я использую компонент:- https://github.com/christianalfoni/formsy-react, для создания форм. Я пытаюсь создать один из моих собственных компонентов ввода. Итак, как уже упоминалось, мне нужно использовать Mixin Форми. Но, к сожалению, его нет в стиле es6. Так что любая работа вокруг кого-либо знает.

вот мой код компонента:-

import Formsy from 'formsy-react';

class DropDownAutoComplete extends React.Component {

    constructor(props, context) {
        super(props, context);

       this.mixins = [Formsy.Mixin];
    }

    changeValue(event) {
        this.mixins[0].setValue(event.currentTarget.value);
    }

    handleValue1Change(value) {
        this.setState({value: value});
    }

    render() {

        const className = this.mixins[0].showRequired() ? 'required' : this.mixins[0].showError() ? 'error' : null;

        // An error message is returned ONLY if the component is invalid
        // or the server has returned an error message
        const errorMessage = this.mixins[0].getErrorMessage();
        return <DropdownList
            data={this.props.dropDownConfigs.value}
            onChange={this.changeValue.bind(this)}
            textField={this.props.dropDownConfigs.name}
            caseSensitive={false}
            filter='contains'>
                        </DropdownList>
    }

}

ошибка при вызове функции showRequired. По-видимому, его реализация использует некоторые переменные состояния, такие как обязательные.

Answer 1

По своей природе миксины не работают с классами ES6 - попытки взломать что-то вместе просто вызовут у вас головную боль!

Одним из решений является использование так называемого компонента более высокого порядка - функции, которая принимает компонент и возвращает новый компонент, который оборачивается вокруг него. Эти компоненты обертки могут иметь собственные хуки жизненного цикла и могут передавать реквизиты обернутым компонентам, эффективно предоставляя вам те же функциональные возможности, которые даст вам миксин, но, возможно, более чистым способом!

formsy-react позволяет использовать этот подход, предоставляя свой собственный HOC:

import {HOC} from 'formsy-react';

class MyInput extends React.Component {
  render() {
    return (
      <div>
        <input value={this.props.getValue()} onChange={(e) => this.props.setValue(e.target.value)}/>
      </div>
    );
  }
};
export default HOC(MyInput);

Answer 2

Вы можете использовать реактив-миксин-декоратор.

Цитата из README:

Если вы создаете компоненты React с использованием классов ES6 и хотите использовать существующие миксины для добавления приятной функциональности вашему компоненту, вы, вероятно, не хотите тратить время на преобразование микшинов во что-то, что в вашем классе компонентов ES6 React. мог бы использовать.