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

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

看起来你只需要正确地定义你的数据。您希望映射ListItems的array。这些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>
)}