将jQuery插件集成到React中

Question

事情是这样的：我正在尝试将FontAwesome IconPicker （一个jQuery插件）集成到我正在研究的React项目中。

到目前为止，这是我得到的：

import '../../../node_modules/fontawesome-iconpicker/dist/js/fontawesome-iconpicker';
import $ from 'jquery';

class IconControl extends Component {

    componentDidMount() {
        this.$el = $( this.el );
        this.$el.iconpicker();

        this.handleChange = this.handleChange.bind( this );
        this.$el.on( 'change', this.handleChange );
    }

    componentDidUpdate( prevProps ) {
        if ( prevProps.icon !== this.props.icon ) {
            this.$el.trigger( 'iconpicker:updated' );
        }
    }

    componentWillUnmount() {
        this.$el.off( 'change', this.handleChange );
        this.$el.iconpicker( 'destroy' );
    }

    handleChange(e) {
        this.props.onChange( e.target.value );
    }

    render() {

        const {
            attributes: {
                icon,
                description,
            },
        } = this.props;

        return (
            <input
                type="text"
                value={ icon }
                ref={ el => this.el = el }
            />
        );
    }

}

export default IconControl;

我已经阅读了关于与其他库集成的 React文档，但是我仍然不清楚如何实现此目的。 我设法使图标选择菜单显示出来并从中选择一个图标，但是我不知道如何使用该特定插件和React来存储该数据。

任何指导将不胜感激:)