javascript - React.cloneElement 不附加 className

Question

如何使用 React.cloneElement 附加或更改 className 属性？
当我使用 React.cloneElement 时，我无法更改或附加 className Prop 。我已经搜索了几个小时，但一无所获。 React.Children.only 或删除传播不会改变行为。它似乎是一个错误，还是性能优化功能？。
期望 html:<div class="parent"><div class="child other-class">testing...</div></div>结果 html:<div class="parent"><div class="child">testing...</div></div>类示例:

class Parent extends React.Component {
  render() {
    return (
      <div className={"parent"}>
        {React.cloneElement(React.Children.only(this.props.children), {
          ...this.props.children.props,
          className: `${this.props.children.props.className} other-class`,
        })}
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return <div className={"child"}>{"testing..."}</div>;
  }
}

功能组件示例:

const Parent = ({ children }) => (
  <div className={"parent"}>
    {React.cloneElement(React.Children.only(children), {
      ...children.props,
      className: `${children.props.className} other-class`,
    })}
  </div>
);

const Child = () => <div className={"child"}>{"testing..."}</div>;

const Parent = ({ children }) => (
  <div className={"parent"}>
    {React.cloneElement(React.Children.only(children), {
      ...children.props,
      className: `${children.props.className} other-class`,
    })}
  </div>
);

const Child = () => <div className={"child"}>{"testing2..."}</div>;

ReactDOM.render(
  <React.StrictMode>
    <Parent>
      <Child />
    </Parent>
  </React.StrictMode>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

问题是你从不使用 className在 Child ，这就是您在 Parent 中操作的内容. Child放一个 className在 div ，但这不是 Child 的 className ，这只是一个硬编码的 Child穿上 div .
如果你想要 Child将该类(class)放在 div 上，您必须编写代码才能做到这一点。此外，您不需要传播， Prop 已合并。最后得到原版className ，我会使用调用 Children.only 的结果，而不是回到 this.props.children (虽然这会起作用，因为如果不是只有一个 only 会抛出)。
看评论:

class Parent extends React.Component {
    render() {
        // Get the `className` from the child after verifying there's only one
        const child = React.Children.only(this.props.children);
        const className = `${child.props.className} other-class`;
        return (
            <div className={"parent"}>
                {React.cloneElement(child, {
                    // No need to spread previous props here
                    className,
                })}
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        // Use `className` from `Child`'s props
        const className = (this.props.className || "") + " child";
        return <div className={className}>{"testing..."}</div>;
    }
}

// Note the `classname` on `Child`, to show that your code using
// `this.props.children.props.className`
ReactDOM.render(<Parent><Child className="original"/></Parent>, document.getElementById("root"));

.child {
    color: red;
}
.child.other-class {
    color: green;
}
.original {
    font-style: italic;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>