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

Библиотека Webix поддерживает интеграцию с фреймворком React.

Webix можно встроить в приложение React, чтобы дополнить его функциональными компонентами.

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

Есть несколько способов использовать Webix вместе с React:

• Использование компонента Webix в приложении React
• Создание пользовательского компонента Webix-React
• Использование компонента Webix с Redux

С чего начать

Если вы ещё не сделали этого, скачайте демо с GitHub. Так вы получите рабочий пример интеграции.

Выполните npm install и npm start.

Откройте http://localhost:3000 в браузере, чтобы просмотреть демо.

Страница будет автоматически обновляться при редактировании полей формы.

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

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

Приложение будет собрано в папку build и готово к развёртыванию.

Использование компонента Webix в приложении React

Компонент React с компонентом Webix внутри создаётся следующим образом:

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

Логика следующая:

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

Related sample: Simple React component with Webix UI

Создание пользовательского компонента Webix-React

Помимо использования готового компонента Webix, можно создать собственный. Например, код пользовательского компонента Slider может выглядеть так:

class SliderView extends Component {
  constructor(props) {
    super(props);
    this.uiContainer = React.createRef();
  }
 
  render() {
    return (
      <div ref={this.uiContainer}></div>
    );
  }
 
  componentDidMount(){
    webix.ready(() => {
      this.ui = webix.ui({
        view:"slider",
        container:this.uiContainer.current,
      });
    })
  }
 
  componentWillUnmount(){
    this.ui.destructor();
    this.ui = null;
  }
 
  shouldComponentUpdate(){
    return false;
  }
}

В приведённом коде создан компонент SliderView, содержащий внутри компонент Webix slider.

Методы, которые используются в примере:

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

Related sample: Custom Webix-React component

Использование компонента Webix с Redux

Компонент Webix можно использовать с Redux без дополнительной настройки.

Для пользовательских компонентов, убедитесь, что компонент возвращает true из shouldComponentUpdate() и предоставляет обработчик componentDidUpdate для изменения состояния компонента Webix.

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

Related sample: Using Webix with Redux

Наверх