ReactJs-如何映射（）映射

Question

我认为这是一个简单的问题，但找不到使它起作用的方法。我有此地图：

public optionsCheckboxes: Map<string, boolean>;

并且在我的render（）函数中，我想对其进行迭代：

renderOptionsMenu(): any {
    let test = <div className={`${style["optionsenuStyle"]}`}>
        {this.optionsCheckboxes.map((option: string, is_checked: boolean) => {
            return <div>{option} is {is_checked}</div>
        })}
    </div>
    return test;
}

感谢您的帮助！

Answer 1

使用Array.from将Map<string, boolean>转换为Array<[string, boolean]>

renderOptionsMenu(): any {
    let test = <div className={`${style["optionsenuStyle"]}`}>
        {Array.from(this.optionsCheckboxes).map(([option, is_checked]) => {
            return <div>{option} is {is_checked}</div>
        })}
    </div>
    return test;
}

示例CodeSandbox

const optionsCheckboxes = new Map<string, boolean>();
optionsCheckboxes.set("Option 1", true);
optionsCheckboxes.set("Option 2", false);

export default function App() {
  return (
    <div>
      {Array.from(optionsCheckboxes).map(([option, is_checked], index) => {
        return (
          <div key={index}>
            {option} is {is_checked + ""}
          </div>
        );
      })}
    </div>
  );
}