Интеграция с React

Вы можете использовать библиотеку Webix при разработке на React.

С примерами интеграции можно ознакомиться в этом репозитории.Чтобы узнать больше об импорте комплексных виджетов Webix в React, ознакомьтесь также с этим репозиторием.

С помощью Webix компонентов, вы можете значительно расширить возможности и функционал React приложения.

Если вы хотите построить интерфейс приложения на основе компонентов библиотеки, ознакомьтесь сначала с микрофреймворком Webix Jet. Он разработан специально под Webix, и позволяет решать многие задачи более эффективно.

Есть несколько способов интеграции Webix-React:

С чего начать

Склонируйте этот GitHub репозиторий и выполните следующие команды:

npm install
npm run start

Откройте страницу в браузере по адресу http://localhost:3000. Страница будет обновляться при любых изменениях кода приложения.

Сборка приложения

Чтобы собрать приложение, выполните команду npm run build.

Создание гибридных компонентов

Пример кода гибридного приложения выглядит следующим образом:

const ui = {
    view:"slider"
};
const value = 123;
 
const SliderView = () => (
  <Webix ui={ui} data={value} />
)

Логика здесь такая:

1. Чтобы создать Webix компонент, используйте тег <Webix>
2. Чтобы настроить компонент, укажите необходимые параметры в объекте ui.

Related sample: Simple React component with Webix UI

Кастомизация гибридных компонентов

Помимо встроенных компонентов (<Webix>), вы можете создавать свои. Код кастомного компонента SliderView будет выглядеть следующим образом.

class SliderView extends Component {
  render() {
    return (
      <div ref="root"></div>
    );
  }
 
  componentDidMount(){
    this.ui = window.webix.ui({
      view:"slider"
      container:ReactDOM.findDOMNode(this.refs.root)
    });
  }
 
  componentWillUnmount(){
    this.ui.destructor();
    this.ui = null;
  }
 
  shouldComponentUpdate(){
    return false;
  }
}

В примере выше показано, как создать гибридный компонент SliderView на основе Webix компонента slider.

Список методов React:

componentDidMount() позволяет создавать новые компоненты
componentWillUnmount() позволяет удалять ненужные компоненты
shouldComponentUpdate() позволяет обновлять компоненты. В примере ниже показано как отключить обновление компонента.

Related sample: Custom Webix-React component

Интеграция c Redux

Вы можете использовать виджеты библиотеки вместе с Redux (без дополнительной кастомизации).

Если вы кастомизируете гибридный компонент, убедитесь, что его метод shouldComponentUpdate() возвращает true, а метод componentWillUpdate() мутирует состояние Webix виджета.

componentWillUpdate(props){
    if (props.data)
      this.setWebixData(props.data);
    if (props.select)
      this.select(props.select);
},
shouldComponentUpdate(){
    return true;
}

Related sample: Using Webix with Redux

Наверх