React组件render返回DOM克隆报错：Objects are not valid as a React child

Hey there! Let's break down what's going wrong here and how to fix it, since you're just starting out with React and TypeScript.

Why You're Seeing That Error #

First off, let's clarify a core rule of React: a component's render() method can only return React elements (JSX, or results from React.createElement()), null, or an array of these things. It cannot directly return a raw DOM object (like the one you get from cloneNode()).

React works with a virtual DOM—it manages its own lightweight representation of the page, then syncs it to the real DOM under the hood. When you try to return a real DOM node, React doesn't know how to handle it, hence the "Objects are not valid as a React child" error.

Also, quick note on your type conversion attempt: in TSX, writing <HTMLElement> gets interpreted as a JSX tag (like <div>), not a type cast. The correct way to cast in TypeScript is using as HTMLElement.

Fix 1: Clone External DOM into a React-Managed Container #

If that table exists outside your React app (like static HTML on the page), you can use React's lifecycle methods to grab it, clone it, and mount it into a container element that React does manage. Here's how to do it in a class component:

export class OverworldComponent extends React.Component<OverworldComponentProps, {}> {
  // Create a ref to hold our container element
  private containerRef = React.createRef<HTMLDivElement>();

  componentDidMount() {
    // Wait until the component is mounted to access the real DOM
    const targetTable = document.querySelector('div.file div.data table');
    
    if (targetTable && this.containerRef.current) {
      // Clone the table (use true for deep clone to copy all child elements)
      const clonedTable = targetTable.cloneNode(true) as HTMLElement;
      // Mount the cloned DOM into our React-managed container
      this.containerRef.current.appendChild(clonedTable);
    }
  }

  render() {
    // Return a React element as a container for our cloned table
    return <div ref={this.containerRef} />;
  }
}

Fix 2: Reuse a React Component (Better Practice) #

If that table is already being rendered by React somewhere else, the best approach is to extract it into a reusable component instead of cloning DOM. This fits React's component-based model perfectly:

// Extract the table into its own component
const DataTable = () => {
  return (
    <table>
      {/* Put your table's content/structure here */}
      <thead>
        <tr><th>Column 1</th><th>Column 2</th></tr>
      </thead>
      <tbody>
        <tr><td>Data 1</td><td>Data 2</td></tr>
      </tbody>
    </table>
  );
};

// Use the component wherever you originally had the table
const FileDataSection = () => {
  return (
    <div className="file">
      <div className="data">
        <DataTable />
      </div>
    </div>
  );
};

// Now reuse it in your OverworldComponent
export class OverworldComponent extends React.Component<OverworldComponentProps, {}> {
  render() {
    return <DataTable />;
  }
}

This way, you're not fighting against React's virtual DOM system—you're working with it, and you get all the benefits of component reuse (easier updates, state management, etc.).

内容的提问来源于stack exchange，提问作者Andrew Cheong