javascript - 如何为 React 组件数组中的每个元素添加一个类?
问题描述
这是我当前的代码:
// 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;
两个组件数组作为输入传递到Main
组件中,我想为每个组件添加一个类。该函数不知道这些组件是什么(即可能是按钮、链接、div 或其他组件),但可以断言它们都有一个className
prop。我该如何实施?当我尝试上述方法时,我得到了这个 linting 错误:
ESLint:分配给函数参数'btn'的属性。(no-param-reassign)
解决方案
您可能应该使用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}` })
})
}