Как переписать это по нормальному???

Question

[string15]

Привет часто встречается такое в коде! И мне не нравится, можно ли это вообще переписать?

const mode = edit ? 'Редактируется' : 'Просмотр';

  return (
    <div className="descr-doc">
      <div className="descr-doc__item">{`Клиент: ${client}`}</div>
      <div className="descr-doc__item">{`Год: ${year}`}</div>
      <div className="descr-doc__item">{`Период: ${period} квартал`}</div>
      <div className="descr-doc__item">{`Версия: ${version}`}</div>
      <div className="descr-doc__item">{`Статус: ${status}`}</div>
      <div className="descr-doc__item">{`Режим: ${mode}`}</div>
      <div className="descr-doc__item">{`Форма: ${type}`}</div>
    </div>
  );

Comments

[Олег Гамега]

а что не так с кодом ?

[Mikhail Osher]

Олег Гамега, например, можно декларативно описать сущность и создать ListView компонент. Всё зависит от остальной части системы.

[Олег Гамега]

Mikhail Osher, это конечно понятно, но ключевое слово

Всё зависит от остальной части системы.

как сферический код оторванный от приложения - ничего плохого не вижу

Answer 1

[Антон Спирин]

function Row({ children }) {
  return <div className="descr-doc__item">{children}</div>
}

<Row>{`Клиент: ${client}`}</Row>

Comments

[string15]

Спасибо, так чище выглядит

Answer 2

[Warden]

render() {
  const items = [
    'Клиент',
    'Год',
    'Период',
    'Версия',
    'Статус',
    'Режим',
    'Форма'
  ]

  const rows = items.map(value => 
    <div className="descr-doc__item">{value}</div>
  )

  return (
    <div className="descr-doc">
      {rows}
    </div>
  )
}

try it bro

Comments

[string15]

Решение нравится, но в этом случае мне кажется не сработает.

<div className="descr-doc__item">{`Период: ${period} квартал`}</div>

[Warden]

Сработает, в таком случаем items будет выглядеть так.

const items = [
  `Клиент: ${client}`,
  `Год: ${year}`,
  `Период: ${period} квартал`,
  `Версия: ${version}`,
  `Статус: ${status}`,
  `Режим: ${mode}`,
  `Форма: ${type}`
]

Тут весь смысл в том, что у тебя есть данные и есть то, как ты их выводишь на страницу, и для большей гибкости кода, хорошо бы эти процессы разделить.

Т.е. данные хранятся в items, а rows это уже то как ты их выводишь. Представь это как конвеер - у тебя есть набор данных, которые ты mappишь в какое-то представление и это предоставление уже видит пользователь.

[string15]

Warden,
Спасибо, понял.
А что такое мапинг?

[Warden]

Маппинг - это, дословно отображение. Т.е. ты берешь данные в одной форме и отображаешь их в другую форму.
map - это функция, которая проходит по списку данных, берет каждый его элемент, применяет к нему какую-то функцию, которая возвращает новый элемент и возвращает новый список, состоящий уже из новых элементов, т.е. маппит (отображает) items в rows.

Пример выше можно также переписать так.

render() {
  const items = [
    'Клиент',
    'Год',
    'Период',
    'Версия',
    'Статус',
    'Режим',
    'Форма'
  ]

  function make_row(value) {
    return (
      <div className="descr-doc__item">{value}</div>
    )
  }

  const rows = items.map(make_row)

  return (
    <div className="descr-doc">
      {rows}
    </div>
  )
}

[string15]

Спасибо, столько раз использовал маппинг, не зная про него)