Переменные UI компонента

Определяет свойства переменных, объявленных UI компонентом, и отображается как свойство компонента. Значения этих переменных могут быть установлены в редакторе свойств компонента, а ссылки и доступ к ним осуществляются так же, как и к любому другому свойству компонента панели инструментов, например, через привязки.

Определения переменных компонентов UI идентичны определениям переменных модели, и с ними также можно напрямую взаимодействовать из кода, определенного в свойстве Источник UI компонента .

Переменные UI компонентов определяются так же, как и переменные модели. Имя переменной - это имя, на которое должна быть ссылка в Источнике при использовании переменной. Предположим, создается переменная со следующими данными:

Для полей определения переменных, не перечисленных выше, можно оставить значение по умолчанию.

Один из способов использовать переменную в коде компонента - включить exampleProperty ( Имя функции) в качестве аргумента в функциональный компонент React:

const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "" })

На значение переменной можно сослаться с помощью {exampleProperty}, как и на обычный аргумент в функциональном компоненте React. Полный код может выглядеть следующим образом:

import React from "react"
import {AbstractWebComponent} from "utils"
class Model extends AbstractWebComponent implements WebComponentModel {
  init() {}
  destroy() {}
}
const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Пример свойства" }) => {
  return <span>Значение примера свойства: {exampleProperty}</span> 
};
registerMySelf($COMPONENT_NAME, Component, Model)

Когда UI компонент добавляется в инструментальную панель из палитры компонентов, переменная будет видна в редакторе свойств компонента с описанием, приведенным в определении переменной: "Пример свойства".

UI компонент будет отрисовываться каждый раз, когда происходит изменение любой переменной (свойства), определенной для компонента. Если необходимо принудительно отрендерить компонент по какой-либо другой причине, то функцию forceRenderComponent() можно вызвать из функции React компонента следующим образом: const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Пример Свойства" }) => { ... componentModel.forceRenderComponent() ... };

В случае, когда значение переменной (свойства) должно быть установлено из кода компонента пользовательского интерфейса, возможно, для запуска привязки или по какой-либо другой причине, можно использовать функцию setVariable().

В примере выше для установки значения exampleProperty в "Новое значение" из функционального компонента React можно использовать componentModel.setVariable(variableName, payload [, context] ):

const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, exampleProperty = "Пример Свойства" }) => {
...  
  componentModel.setVariable("exampleProperty",[{exampleProperty:"Новое значение"}])
...
};

Аргументы в примере следующие:

• "exampleProperty" - имя свойства, определенного выше

• [{exampleProperty: "Новое значение"}] - таблица данных со значениями для присвоения указанной переменной. В текущем примере переменная представляет собой таблицу данных с одной строкой и полем с именем exampleProperty.

• Необязательный аргумент context оставлен пустым, так как по умолчанию используется контекст компонента.