Реагирующее картирование и сложности компонентизации

Question

Я изо всех сил пытаюсь отобразить свой повторный <listItem> из-за добавленных различий между предметами.Они вытягивают разные const и выполняют разную логику в зависимости от того, какой элемент он представляет.

https://codesandbox.io/s/pj0yk6z91x

      <ListItem dense={this.props.dense} alignItems="flex-start">
        <ListItemText
          primary={
            <React.Fragment>
              Predicted score - <strong>4 Weeks</strong>
            </React.Fragment>
          }
          secondary={
            <React.Fragment>
              <Typography component="span" color="textPrimary">
                Predicted date{" "}
                <i
                  style={{ "font-size": "1em" }}
                  className="zmdi zmdi-calendar mx-2"
                />{" "}
                {moment(data.vulnerabilityDate)
                  .add(4, "weeks")
                  .format("MMM DD, YYYY")}
              </Typography>
            </React.Fragment>
          }
        />
        <ListItemSecondaryAction>
          <span
            style={{
              "font-size": "1rem",
              "background-color": status4WeeksColor,
              "min-width": "45px"
            }}
            className="vulnerability badge badge-primary"
          >
            {data.status4Weeks}
          </span>
        </ListItemSecondaryAction>
      </ListItem>

Я хочу сопоставить это с этим:

const data = {
  status4Weeks: "2",
  status8Weeks: "3",
  status12Weeks: "4"
};

Что не кажется слишком сложной задачей, но я также хочу, чтобы каждый из них имел уникальное значение, которого нет в полезной нагрузке данных 4 недели, 8 недель, 12 недель в качестве заголовков.Кроме того, каждый из них может иметь отдельный цвет, связанный со значением, которое я уже отображаю:

const status4WeeksColor = COLORS[data.status4Weeks];
const status8WeeksColor = COLORS[data.status8Weeks];
const status12WeeksColor = COLORS[data.status12Weeks];

Поэтому необходимо принять во внимание то, что все они различны в каждом:

{data.status4Weeks}
status4WeeksColor
.add(4, "weeks")
<strong>4 Weeks</strong>

Не уверен, с чего начать!помочь?

Answer 1

Кажется, вам просто нужно правильно определить ваши данные.Вы хотите отобразить array из ListItems.Каждый из этих ListItem имеет title, statusWeek и color, а также numWeeks.

. Учитывая это, ваши данные должны быть массивом объектов с этими свойствами,например:

const data = [
{title: '4 Weeks', statusWeek: '2' , color: 'red', numWeeks: 4},
{title: '12 Weeks', statusWeek: '4' , color: 'blue', numWeeks: 12}]

Затем, когда вы делаете

data.map(el => <ItemList {...el} />)

ItemList получает каждый элемент массива с четырьмя props (цвет, заголовок, статус, количество недель),так что вы просто подключаете их в свой компонент там, где они нужны, например (обратите внимание на реквизиты):

<ListItem dense={this.props.dense} alignItems="flex-start">
        <ListItemText
          primary={
            <React.Fragment>
              Predicted score - <strong>{this.props.title}</strong>
            </React.Fragment>
          }
          secondary={
            <React.Fragment>
              <Typography component="span" color="textPrimary">
                Predicted date{" "}
                <i
                  style={{ "font-size": "1em" }}
                  className="zmdi zmdi-calendar mx-2"
                />{" "}
                {moment(data.vulnerabilityDate)
                  .add(this.props.numWeeks, "weeks")
                  .format("MMM DD, YYYY")}
              </Typography>
            </React.Fragment>
          }
        />
        <ListItemSecondaryAction>
          <span
            style={{
              "font-size": "1rem",
              "background-color": this.props.color,
              "min-width": "45px"
            }}
            className="vulnerability badge badge-primary"
          >
            {this.props.statusWeek}
          </span>
        </ListItemSecondaryAction>
</ListItem>

Это должно сработать, это просто еще один подход с данными / реквизитами, я не знаю, еслиэто работает для вас.

Ура!

Answer 2

Я не уверен, что понял ваш вопрос, поэтому, возможно, это не то, что вы ищете.

Точно так же, как вы построили цветовое сопоставление для каждого значения вашего объекта данных, вы можете создатьскажем, отображение действий для каждого из ваших значений объекта данных.Затем вы можете перебирать различные значения вашего data объекта и использовать сопоставления COLOR и ACTION, чтобы определить, что делать с вашим значением

const ACTIONS = {
  '2': function () { /* do something */ },
  '3': function () { /* do something else */ },
};

{Object.values(data).map((type) => (
  <ListItem key={type}>
    <p>Predicted score: {type} weeks</p>
    <p
      style={{ backgroundColor: COLOR[type] }}
      onClick={ACTIONS[type].bind(this)}
      >
      {type}
    </p>
  </ListItem>
)}