2

我正在尝试<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。如果我将来决定将TempObject2div 添加到 div 中，我只需要将它添加到WORKOBJECTSVALS，我该怎么做？

4

1 回答 1

2

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

这是您的示例的修改，从使用开始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;
})
于 2015-08-07T16:45:21.810 回答