Question

我正在尝试根据对象中的项目呈现一组(True, _)，但我不想指定对象中项目的名称以显示它们。“ / p>

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

我想在<div> </div>中指定哪些会通过发送来展示。

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添加到div中，我只需将其添加到TempObject2，我该怎么做？

Answer 1

您需要做的是使用属性名称，因为这些是关键。 Object.keys返回一个属性名称数组。然后在filter之前添加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;
})

ReactJS基于数组的值呈现OBJ.map

1 个答案: