跳到主要内容

API

createElement​

createElement 和 cloneElement 有什么区别?

React 中的 createElement 和 cloneElement 都可以用来创建元素，但它们用法有所不同。

createElement 用于在 React 中动态地创建一个新的元素，并返回一个 React 元素对象。它的用法如下：

React.createElement(type, [props], [...children]);

其中，type 是指要创建的元素的类型，可以是一个 HTML 标签名（如 div、span 等），也可以是一个 React 组件类（如自定义的组件），props 是一个包含该元素需要设置的属性信息的对象，children 是一个包含其子元素的数组。createElement 会以这些参数为基础创建并返回一个 React 元素对象，React 将使用它来构建真正的 DOM 元素。

cloneElement 用于复制一个已有的元素，并返回一个新的 React 元素，同时可以修改它的一些属性。它的用法如下：

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

其中，element 是指要复制的 React 元素对象，props 是一个包含需要覆盖或添加的属性的对象，children 是一个包含其修改后的子元素的数组。cloneElement 会以这些参数为基础复制该元素，并返回一个新的 React 元素对象。

在实际使用中，createElement 通常用于创建新的元素（如动态生成列表），而 cloneElement 更适用于用于修改已有的元素，例如在一个组件内部使用 cloneElement 来修改传递进来的子组件的属性。

cloneElement 有哪些应用场景

React 中的 cloneElement 主要适用于以下场景：

  1. 修改 props

cloneElement 可以用于复制一个已有的元素并覆盖或添加一些新的属性。例如，可以复制一个带有默认属性的组件并传递新的属性，达到修改属性的目的。

// 假设有这样一个组件
function MyComponent(props) {
 // ...
}

// 在另一个组件中使用 cloneElement 修改 MyComponent 的 props
function AnotherComponent() {
 return React.cloneElement(<MyComponent />, { color: 'red' });
}
  1. 渲染列表

在渲染列表时，可以使用 Array.map() 生成一系列的元素数组，也可以使用 React.Children.map() 遍历子元素并返回一系列的元素数组，同时使用 cloneElement 复制元素并传入新的 key 和 props。

// 使用 Children.map() 遍历子元素并复制元素
function MyList({ children, color }) {
 return (
 <ul>
 {React.Children.map(children, (child, index) =>
 React.cloneElement(child, { key: index, color })
 )}
 </ul>
 );
}

// 在组件中使用 MyList 渲染列表元素
function MyPage() {
 return (
 <MyList color="red">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </MyList>
 );
}
  1. 修改子元素

使用 cloneElement 也可以在一个组件内部修改传递进来的子组件的属性，例如修改按钮的样式。

function ButtonGroup({ children, style }) {
 return (
 <div style={style}>
 {React.Children.map(children, (child) =>
 React.cloneElement(child, { style: { color: 'red' } })
 )}
 </div>
 );
}

function MyPage() {
 return (
 <ButtonGroup style={{ display: 'flex' }}>
 <button>Save</button>
 <button>Cancel</button>
 </ButtonGroup>
 );
}

总之，cloneElement 可以方便地复制已有的 React 元素并修改其属性，适用于许多场景，例如修改 props、渲染列表和修改子元素等。

cloneElement 的使用​

答案

通过 cloneElement 来复制 Element，目前官方不推荐使用，可以通过 render props 等方式实现 Element 复制。

延伸阅读

forwardRef 的使用​

答案

forwardRef 是 React 提供的一个 API，用于在函数组件中获取子组件的 ref。解决函数组件无法直接使用 ref 的问题。 目前官方不推荐使用，可以通过 props 的方式传递 ref。

import { useRef, forwardRef } from 'react'

const MyInput = forwardRef(function MyInput (props, ref) {
  return (
   <div>
      <label>My Input</label>
      <input type="text" ref={ref} {...props} />
   </div>
  )
})

function Parent () {
  const ref = useRef()
  return (
   <div>
      <MyInput ref={ref} />
      <button onClick={() => ref.current.focus()}>Focus</button>
   </div>
  )
}

export default Parent
Open on CodeSandboxOpen Sandbox

延伸阅读

48%