如何在 React 中指定动态的 less 的样式？

Question

想通过循环生成列表，并给列表成员指定不同的样式。
问题在于如何指定动态合成的样式名？

简化的代码如下：

import React from 'react';
import styles from './style.less';

export default () => {
  return (
    <div className="如何在此增加 test3 样式"> hello </div>
  );
}

// style.less

.loop(@i) when (@i < 10) {
  @className: ~".test@{i}";
  @{className} {
    background: #43389F;
  }
  .loop(@i + 1);
}

.loop(0);