如何正确实现props属性值与setter value的联动

hzwjz commented 1 year ago

我想实现listSetter的value跟另一个props属性值联动

例如 listSetter 的 value 根据 props.setting的值来重新生成数组

目前代码是这么写的

<ListSetter
            ref={(ref) => {
              if (ref) {
                const settings = this.getProps().getPropValue('settingId');
                const columns = this.getProps().getPropValue('columns');

                if (settings) {
                  const { tableRules } = settings; // 列字段配置

                  // 检查是否有变化
                  if (!isTableRulesChange(columns, tableRules)) {
                    return;
                  }

                  const options = mergeColumns(columns, tableRules); // 将列字段配置 和 列其他配置 合并

                  ref.list.prop.setHotValue(options);
                  ref.list.updateItems(ref.list.prop);
                  ref.forceUpdate();
                }
              }
            }}
            descriptor={getDescriptor('title')}
            checkField={null}
            addable={false}
            deletable={false}
            draggable={false}
            editable
            display="drawer"
            configure={[
              {
                name: 'id',
                title: 'ID',
                display: 'none',
                editable: false,
                setter: <TextSetter readOnly />,
              },
              {
                name: 'title',
                title: '标题',
                display: 'inline',
                initialValue: '',
                editable: false,
                setter: <TextSetter readOnly />,
              },
              {
                name: 'dataKey',
                title: '数据字段',
                display: 'inline',
                initialValue: '',
                editable: false,
                setter: <TextSetter readOnly />,
              },
              {
                name: 'width',
                title: '宽度',
                display: 'inline',
                initialValue: 200,
                setter: (
                  <NumberSetter
                    units={[
                      {
                        type: 'px',
                        list: true,
                      },
                      {
                        type: '%',
                        list: true,
                      },
                    ]}
                  />
                ),
                supportVariable: true,
              },
              {
                name: 'align',
                title: '对齐方式',
                display: 'inline',
                initialValue: 'left',
                setter: (
                  <ChoiceSetter
                    options={[
                      { value: 'left', title: '居左' },
                      { value: 'center', title: '居中' },
                      { value: 'right', title: '居右' },
                    ]}
                  />
                ),
                supportVariable: true,
              },
              {
                name: 'lock',
                title: '列固定',
                display: 'inline',
                initialValue: 'none',
                setter: (
                  <ChoiceSetter
                    options={[
                      { value: 'none', title: '无' },
                      { value: 'left', title: '左' },
                      { value: 'right', title: '右' },
                    ]}
                  />
                ),
                supportVariable: true,
              },
              {
                name: 'sortable',
                title: '显示排序',
                display: 'inline',
                initialValue: false,
                setter: <BoolSetter />,
                supportVariable: true,
              },
              {
                name: 'hidden',
                title: '是否隐藏',
                display: 'inline',
                initialValue: false,
                setter: <BoolSetter />,
                supportVariable: true,
              },
              {
                name: 'groupName',
                title: '分组标题',
                display: 'inline',
                initialValue: '',
                setter: <TextSetter />,
                supportVariable: true,
              },
              {
                name: 'render',
                title: '内容定制渲染',
                display: 'accordion',
                setter: (
                  <ActionSetter
                    defaultCode={`/**
       * 表格列自定义渲染
       * @param value 当前列的数据
       * @param index 当前行所在的行号
       * @param rowData 当前行的数据
       */
      function renderCell(value, index, rowData) {
        return <span>{value}</span>;
      }`}
                    defaultActionName="renderCell"
                  />
                ),
              },
            ]}
          />