如何将 class 添加到 React 组件数组中的每个元素？

Question

这是我当前的代码：

// src/components/Main.tsx
import * as React from 'react';
import { ReactElement } from 'react';

import * as styles from '../styles/Main.module.scss';

type MainProps = {
  leftBtnGroup: ReactElement[],
  rightBtnGroup: ReactElement[],
  children: string,
};

const Main = ({ leftBtnGroup, rightBtnGroup, children }: MainProps) => (
  <>
    <div className={styles.main__btnBar}>
      <div className={styles.main__btnBar__leftBtnGrp}>
        {
          leftBtnGroup.map((btn) => {
            btn.props.className += ` ${styles.main__btnBar__btn}`;

            return btn;
          })
        }
      </div>
      <div className={styles.main__btnBar__rightBtnGrp}>
        {
          rightBtnGroup.map((btn) => {
            btn.props.className += ` ${styles.main__btnBar__btn}`;

            return btn;
          })
        }
      </div>
    </div>
    {children}
  </>
);

export default Main;

两个 arrays 组件作为输入传递到Main组件中，我想为每个组件添加一个 class。 function 不知道这些组件是什么（即可能是按钮、链接、div 或其他组件），但可以断言它们都有一个className属性。 我该如何实施？ 当我尝试上述方法时，我得到了这个 linting 错误：

ESLint：分配给 function 参数“btn”的属性。（无参数重新分配）

Answer 1

您可能应该使用React.cloneElement ( https://reactjs.org/docs/react-api.html#cloneelement )

{
  leftBtnGroup.map(btn => {
    // I used ?? but you can use your choice of checking for existing
    // classes. Without checking, if they have no existing class this
    // would add an 'undefined' class where the existing classes go.
    return React.cloneElement(btn, { className: `${btn.props.className ?? ''} ${styles.main__btnBar__btn}` })
  })
}