Javascript 在React中，这种在对象上循环的等效方法是什么

我正在学习React，如果这看起来很基本的话，请原谅，但是我不知道如何在React中执行一个简单的for-in-loop来呈现html元素列表。我知道如何使用

Array.map

，但是

.map

只适用于数组，而不是对象。我需要经历一些奇怪的事情才能完成我所需要的。我的结论是：

import React from 'react';

export default class FormSelect extends React.Component {
  render() {
    return (
      <div className="form-group">
        <label htmlFor="{this.props.name}">{this.props.label}</label>
        <select name="{this.props.name}" className="form-control"
                required="{this.props.required}">
          { Object.keys(this.props.options).map(function(option){
            return <option>{option}</option>
          })}
        </select>
      </div>
    );
  }
}

从“React”导入React；
导出默认类FormSelect扩展React.Component{
render（）{
返回(
{this.props.label}
{Object.keys（this.props.options）.map（函数（选项））{
返回{option}
})}
);
}
}

我希望能够用一个简单的for-in循环来实现它。您将如何使用for-in循环重写此内容

---

在React中，在这样一个对象上循环的推荐方法是什么？

这样做很好，只是没有将选项的值用于任何事情，只使用它们的名称

另一种方法是将

this.props.options

设置为数组，这样就可以跳过

Object.keys

部分

但是，如果它是一个对象，并且您希望循环其（自己的可枚举）属性，

object.keys（…）.map（…）

就可以了

在React中，在这样的对象上循环的推荐方式是什么

你所拥有的一切都很好。您可以在循环中为…使用

，如下所示：

import React from 'react';

export default class FormSelect extends React.Component {
  render() {

    const options = [];
    for (const option in this.props.options) {
      options.push(<option>{option}</option>);
    }

    return (
      <div className="form-group">
        <label htmlFor="{this.props.name}">{this.props.label}</label>
        <select name="{this.props.name}" className="form-control"
                required="{this.props.required}">
          {options}
        </select>
      </div>
    );
  }
}

从“React”导入React；
导出默认类FormSelect扩展React.Component{
render（）{
常量选项=[]；
for（此.props.options中的常量选项）{
options.push（{option}）；
}
返回(
{this.props.label}
{options}
);
}
}

请记住，
for…in
和
Object.keys
返回一组不同的属性


JSX语法只是函数调用。例如，
bar
变成
React.createElement（'div'，{id:'foo'}，'bar'）
。如果这样的话，其他一切都只是简单的JavaScript。
对于这个和/或未来的问题，如果您提供一个可运行的堆栈片段（
[]
工具栏按钮），我们可能会更好地帮助您。堆栈代码段支持React，包括JSX。