ReactJS渲染一个OBJ.基于数组的值进行映射

Question

我试图根据对象中的项目呈现一组<div> </div>，但我不想在对象中指定项目的名称以显示它们。

在下面的例子中，我希望WorkObjectID和WorkObjectVal是动态的而不是静态的。如果我将tempObject添加到对象中，它将不会在呈现数据时显示，因为我没有在miniTable中定义它。

如果可能的话，我想通过在var WORKOBJECTSVALS = {}中发送它们来指定哪些将被显示。

  var WORKOBJECTS = [ {
                      WorkObjectID: "1", WorkObjectVal: "First",
                      TempObject1: "55", TempObject2: "Denied" 
                      }, 
                      {
                       WorkObjectID: "2", WorkObjectVal: "Second",
                      TempObject1: "110", TempObject2: "Allowed" 
                      }];
  var WORKOBJECTSVALS = {"WorkObjectID", "WorkObjectVal", "TempObject1" };
  render: function () {
    var miniTable = this.state.WORKOBJECTS.map(function(val) {
      return (
         <div> {val.WorkObjectID} </div>
         <div> {val.WorkObjectVal} </div>
      );
    });
    return(
      {miniTable}
    );
}

在上面的示例中，我希望显示TempObject1而不是TempObject2。如果我决定在未来，我想把TempObject2添加到div中，我只需要把它添加到WORKOBJECTSVALS，我怎么能做到这一点?

Answer 1

您需要做的是处理属性名，因为它们是关键。Object.keys返回一个属性名称数组。然后在map之前添加filter，以便删除不需要的属性名称。

下面是对您的示例的修改，首先使用Object.keys(注意在WORKOBJECTS和WORKOBJECTSVALS的定义中的更改，因此它们都是对象而不是数组)

var WORKOBJECTS = { WorkObjectID: "1", WorkObjectVal: "First",
                    TempObject1: "55", TempObject2: "Denied" };
var WORKOBJECTSVALS = { WorkObjectID: true, WorkObjectVal: true, TempObject1: true };
render: function () {
  var workObjects = this.state.WORKOBJECTS;
  var miniTable = Object.keys(workObjects).
    .filter(function(keyName) {
      return WORKOBJECTSVALS[keyName];
    })
    .map(function(keyName) {
      var workObjectID = keyName;
      var workObjectVal = workObjects[keyName];
      return (
         <div> {workObjectID} </div>
         </div> {workObjectVal} </div>
      );
    });
  return(
    {miniTable}
  );
}

如果WORKOBJECTSVALS必须是一个数组，您可以更改过滤器来实现这一点。然而，它的效率较低，特别是如果数组很大

.filter(function(keyName) {
  return WORKOBJECTSVALS.indexOf(keyName) !== -1;
})