SolidJS: For コンポーネントを React のように記述するためのワンライナー

以下の For コンポーネントを、

<For each={cats()}>{(cat, i) =>
  <li>
    <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
      {i() + 1}: {cat.name}
    </a>
  </li>
}</For>

以下の React のように記述するためのワンライナー。

{cats.map((cat, i) =>
  <li>
    <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
      {i + 1}: {cat.name}
    </a>
  </li>
)}

環境

• SolidJS 1.5.1

ソースコード

const _ = (array) => ({ map: (fn) => <For each={array()}>{fn}</For> })

以下のように使用する。

{_(cats).map((cat, i) =>
  <li>
    <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
      {i() + 1}: {cat.name}
    </a>
  </li>
)}

Solid Playground