Question

我正在尝试为子组件添加一个类名，以保留可能设置为该组件的原始类。

代码如下：

import React, { Component } from "react";
import PropTypes from "prop-types";

    class ClassExtender extends Component {
        getChildrenWithProps = () => {
            let addedClass = "my-new-css-class-name";

            return React.Children.map(this.props.children, child => 
                React.cloneElement(child, { className: [child.className, addedClass] })
            );
        };

        render = () => {
            return this.getChildrenWithProps();
        };
    }

    export default ClassExtender;

当我的组件渲染时，我得到了错误的结果：

<div class=",my-new-css-class-name">Test</div>

这指出了两个可能的问题：

逗号可能表示我需要将代码更改为React.cloneElement(child, { className: child.className + " " + addedClass });。这是一个简单的步骤。
child.className返回null。如何检索附加到子组件的当前类？

Answer 1

child.className返回null。如何获取子组件上附加的当前类？

child.props.className

ReactJS：如何将className添加到子组件

1 个答案: