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

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>

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

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

Answer 1

child.className返回null.如何检索附加到子组件的当前classe？

child.props.className