javascript - ReactJS:如何将类名添加到子组件

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 is returning null. How can I retrieve the current classe(s) attached to the child component ?

child.props.className