Как генерировать страницу по шаблону в react js

Question

Здравстуйте, как сделать что бы по нажатию кнопки edit(с картинки 1) генерировалась страница по шаблону с данными из БД (как на картинке 2)

Каким образом это можно реализовать на реакте? Или дайте плиз наводку где про это можно посмотреть

(На картинках изображён набросок того как должна выглядеть страница и где какой элемент будет располагаться)

Answer 1

Вам потребуется применить шаблонизатор. Это такой компонент на React, который генерирует форму из объекта с данными и json шаблона. Содержимое excel документа потребуется привести к виду, который сможет прочитать шаблонизатрр

Сам json можно получить из файла xlsx используя функцию parseExcel из gist. Работает как в NodeJS, так и браузере

import { useState } from "react";

import { One, FieldType } from "react-declarative";

const fields = [
  {
    type: FieldType.Text,
    title: "First name",
    name: "firstName"
  },
  {
    type: FieldType.Text,
    title: "Age",
    inputFormatterTemplate: "000",
    inputFormatterAllowed: /^[0-9]/,
    name: "age"
  }
];

const initialData = {
  firstName: 'Petr',
  age: '23',
};

export const App = () => {
  const [data, setData] = useState(initialData);

  const handleChange = (data) => setData(data);

  return (
    <>
      <One handler={data} fields={fields} onChange={handleChange} />
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </>
  );
};

export default App;

Я бы рекомендовал посмотреть в сторону jsonforms или react-declarative.

Ссылка на codesandbox, чтобы потыкать в браузере

БЛОГ НА HUSL

Как генерировать страницу по шаблону в react js

Ответы (1 шт):