如何使用 React.cloneElement()函数？

在 React 中，使用 cloneElement 函数可以让开发者对组件进行复制，并且可以向其传递新的 props 。

语法

React.cloneElement(element, [props], [...children])

• element：需要复制的组件。
• [props]：新的 props 。
• [...children]：新的子组件。

举个栗子

我们可以使用 cloneElement 来创建一个高阶组件：

import React from 'react';

function withShadow(WrappedComponent) {
  return React.cloneElement(WrappedComponent, {
    style: {
      boxShadow: '1px 1px 5px rgba(0, 0, 0, 0.1)',
    }
  });
}

function Button({ children, style }) {
  return (
    <button style={style}>{children}</button>
  );
}

const ShadowButton = withShadow(<Button>Click me</Button>);

export default ShadowButton;

在上面的例子中，我们创建了一个 withShadow 高阶组件，它接收一个组件 WrappedComponent 作为参数，并复制了这个组件，并向它传递了一个新的样式对象 style ，使它拥有阴影效果。

在返回的 ShadowButton 组件中，我们调用了 withShadow 函数，并传递了一个 <Button> 组件作为参数。现在，我们就可以在 ShadowButton 中使用这个具有阴影效果的按钮了。

总结

使用 React.cloneElement 函数可以轻松地对组件进行复制，并向它们传递新的 props 。这使得在 React 中创建高阶组件更加容易。