Преобразование конфигурации столбцов MUI-Datatables - PullRequest
Новая
       72

Преобразование конфигурации столбцов MUI-Datatables

0 голосов
/ 31 марта 2020

Я не могу понять, как объединить данные по-разному в зависимости от того, какие данные передаются. Вот данные опоры .... 

columns={[
    {
        name: "Fund Name",    //Title
        width: "40%",         //Colum Width
        options: {[           
            customBodyRender: (value, tableMeta, updateValue) => {
                var splitValue = value.split("//");
                return (
                    <div className="fundName">{splitValue[0]}<p>{splitValue[1]}</p></div>
                );
            }
        ]}
    }, {
        name: "Review Date",
        width: "20%"
    }, {
        name: "Company Debt",
        width: "20%"
    }, {
        name: "Alerts",
        width: "10%",
        options: {[
            simpleBodyRender: <Options />
        ]}
    }
}

Так что, если он использует customBodyRender, я хочу, чтобы он делал одно, а если он делает simpleBodyRender, я хочу, чтобы он делал это немного по-другому.

Вот слияние 

    let columns = this.props.columns.map(item => {
        item.options
        ? ({ ...item, options: eval(item.options) })
        : item
    });

По сути, я хочу, чтобы это выглядело примерно так ... 

let columns = this.props.columns.map(item => {
    if(item.options == "customBodyRenderer"){
        item.options
            ? ({ ...item, options: eval(item.options) })
            : item
        });
    } else if(item.options == "simpleBodyRenderer"){
        item.options
            ? ({ ...item, options: customBodyRender: (value, tableMeta, updateValue) => { eval(item.options) }})
            : item
        });
    }
});

Так что, если это customBodyRenderer, оно печатает все, но если это simpleBodyRenderer заполняет customBodyRender: (value, tableMeta, updateValue) => { для пользователя.

Надеюсь, это имеет смысл.

Спасибо

1 Ответ

0 голосов
/ 31 марта 2020

Хранение компонентов в состоянии и других структурах не очень хорошая идея. Выполнимо, но не рекомендуется .

Просто забудьте о eval ... вы можете использовать только функции, которые возвращают функции ... вы можете использовать компоненты в качестве параметров, визуализировать их внутри других компонентов, HO C, создавать ... если вы знаете, как (требуются более сложные знания о реакции) ... сейчас KISS.

Вы можете (?) использовать простые строки в качестве источника: 

options: {
  simpleBodyRender: "options"
}

... и преобразовать его, используя '.map`, в нужный формат (функция возвращаемые компоненты): 

let columns = this.props.columns.map(item => {
  if(item.options && item.options.simpleBodyRender){
    swith( item.options.simpleBodyRender ) {
      case "options": 
        return { ...item, 
          options: {
            customBodyRender: (value, tableMeta, updateValue) => <Options data={value} /> 
          }
        }
      case "other options": 
        return { ...item, 
          options: {
            customBodyRender: (value, tableMeta, updateValue) => <OtherOptions data={value} /> 
          }
        }
      default: return { ...item, 
          options: {
            customBodyRender: (value, tableMeta, updateValue) => <NotSupportedSimpleBodyRenderer /> 
          }
        }
      }
    }
  }
}

Примечание: options: { <<< одна скобка, объект, а не <code>{[

...