使用 React.cloneElement 動態處理 JSX 和字串內容

雪旭發表於2024-07-16
ReactJS字串

在前端開發中，我們經常需要在元件之間傳遞資料，並且有時這些資料的型別可能會有所不同，比如傳遞字串或 JSX 元素。在本文中，我們將探討如何在 React 中處理這樣的情況，並使用 React.cloneElement 來動態修改傳遞的 JSX 元素。React.cloneElement 是 React 提供的一個用於克隆和修改元素的 API。這個函式可以用來克隆一個 React 元素，並新增或覆蓋其屬性和子元素。

使用場景

  • 在高階元件中修改子元件的 props：高階元件（HOC）可以使用 React.cloneElement 來修改其子元件的 props。
  • 在組合元件中傳遞額外的 props：父元件可以使用 React.cloneElement 來給其子元件傳遞額外的 props，而無需在子元件內部進行修改。
  • 動態注入屬性：在渲染過程中，根據某些條件動態地注入或修改元素的屬性。

語法

React.cloneElement(
  element, 
  [props], 
  [...children]
)
  • element：要克隆的 React 元素。
  • props（可選）：一個物件，包含要合併的新 props。
  • children（可選）：新的子元素，可以覆蓋現有的子元素。

一、 父元件的實現

我們建立了一個 el 變數，它可以是字串或者 JSX 元素。然後，我們將其透過 title prop 傳遞給 Home 元件。

import Home from './page/home';
const App = () => {
  const el = <div><i>This is JSX</i></div>;
  // const el = '<b>This is a string</b>';
  return (
    <>
      <h1 onClick={handClick}>父元件</h1>
      -----------------------------------------
      <Home title={el} />
    </>
  );
};

二.子元件的實現

在子元件中，我們需要處理傳遞過來的 title prop，並根據它的型別來決定如何渲染內容。我們使用 useEffect 來檢測 title 的變化，並使用 React.cloneElement 來克隆並修改 JSX 元素。

import React, { useEffect, useState } from "react";
import './hom.css';
const Home = (props) => {
    const { title } = props
    const [childTitle, setChildTitle] = useState('')
    useEffect(() => {
        if (React.isValidElement(title)) {
            // 如果是有效的 React 元素（即 JSX），加上類名
            setChildTitle(React.cloneElement(title, { className: 'content' }));

        } else {
            setChildTitle(<div className='content' dangerouslySetInnerHTML={{ __html: title }} />);
        }
    }, [title])

    return <>
        <p>下面是父元件傳遞的內容</p>
        {childTitle}
    </>
}
export default Home

在這裡，我們使用 React.isValidElement 來判斷 title 是否為有效的 React 元素。如果是有效的 React 元素，我們使用 React.cloneElement 來克隆它並新增一個類名。如果不是有效的 React 元素（即字串）。透過以上步驟，我們成功實現了在 React 中動態處理傳遞的 JSX 和字串內容。這種方法非常適用於需要根據傳遞的資料型別進行不同處理的場景。

相關文章