[react] createElement與cloneElement兩者有什么區別？

• createElement是創建一個React元素，jsx即是這個函數的語法糖；它的函數簽命是React.createElement(type, [props], [...children])
• cloneElement是拷貝一個React元素，可選擇在修改它的props后，再返回一個新的React元素；它的函數簽命是React.cloneElement(element, [props], [...children]): ReactElement,這個函數常結合React.Children.map一起使用，修改props.children的props，來進行一些額外的操作，如下

/** 以下代碼實現點擊子組件是，先執行父組件的onClick方法，再執行子組件的onClick方法*/ import React from 'react';function Tab(props) {const _onClick = (onclick) => {props.onClick();onclick();};return <ul onClick={props.onClick}>{React.Children.map(props.children, child => {const childProps = child.props;const newProps = {...childProps,onClick: _onClick.bind(null, childProps.onClick)}return React.cloneElement(child, newProps);})}</ul> }function TabItem(props) {const onClick = event => {event.stopPropagation();props.onClick(event);}return <li onClick={onClick}>{props.children}</li> }function Demo() {const onClickTab = () => {console.log('onClickTab')}const onClickItem = () => {console.log('onClickItem')}return <Tab onClick={onClickTab}><TabItem onClick={onClickItem}>111</TabItem><TabItem onClick={onClickItem}>222</TabItem><TabItem onClick={onClickItem}>333</TabItem></Tab> }export default Demo;

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[react] createElement与cloneElement两者有什么区别？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。