React.cloneElement 不附加类名

Question

我如何 append 或使用 React.cloneElement 更改 className 属性？

当我使用 React.cloneElement 时，我无法更改或 append className 道具。 我已经搜索了几个小时，但我什么也没找到。 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 示例：

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

问题是您从未在Child中使用className ，而这正是您在Parent中操作的。 Child将className放在div上，但这不是Child的className ，它只是Child放在div上的硬编码。

如果您希望Child将 class 放在div上，您必须编写代码来执行此操作。 此外，您不需要传播，道具是合并的。 最后，为了获得原始的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>