Question

由于项目之间的差异，我正在努力映射重复的<listItem>。他们引入不同的const并根据其代表的项目执行不同的逻辑。

      <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

我不确定我是否理解您的问题，所以也许这不是您想要的。

以为每个数据对象值构建颜色映射的方式相同，可以为每个数据对象值创建动作映射。然后，您可以遍历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>
)}

Answer 2

似乎您只需要正确定义数据即可。您要映射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（颜色，标题，状态，周数）的数组的每个元素，因此您只需将它们插入需要它们的组件中，例如（注意道具）：< / p>

<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>

应该可以解决问题，这只是使用数据/道具的另一种方法，我不知道这是否对您有用。

干杯！

反应映射和组件化的复杂性

2 个答案: