ReactJS 根据数组的值渲染 OBJ.map

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;
})