如何在反应数组中添加多个 HTML 元素及其属性？

Question

我正在 React 数组中添加带有 class 属性的 HTML。 colArray1.push( <div className={classes.imgContainer} key={875643}>); 它无法渲染和显示 “无法读取未定义的属性‘imgContainer’” 如何在 React 数组中添加多个 HTML 元素及其属性？

Answer 1

您可以使用简单的映射创建一个字符串数组并呈现适当的元素，如下所示：

const elements = [['div', classes.imgContainer], ['span', classes.otherContainer]];

return (
    elements.map(elem, i => {
        switch (elem[0]) {
            case 'div':
                return <div className={elem[1]} key={i} />
            case 'span':
                return <span className={elem[1]} key={i} />
            default:
                return <React.Fragment />
        }
    });
);