使用 React.cloneElement 动态处理 JSX 和字符串内容

在前端开发中，我们经常需要在组件之间传递数据，并且有时这些数据的类型可能会有所不同，比如传递字符串或 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 和字符串内容。这种方法非常适用于需要根据传递的数据类型进行不同处理的场景。