如何从普通JS函数调用React类/函数组件？调用后JSX不渲染怎么办？

嘿，你的问题核心在于直接调用React函数组件只是返回了JSX元素对象，但没有触发React的渲染流程——React需要把这些JSX对象挂载到DOM树中，并且管理它们的生命周期，才能在浏览器中显示出来。

为什么直接调用Greeting()不会显示内容？ #

当你在普通JS函数Calling里调用Greeting()时，它确实会执行函数内部的代码，返回<Extra/>对应的JSX对象，但这个对象本质上只是一个描述UI的JavaScript对象（类似{type: 'Extra', props: {}}），并没有被React处理并渲染到页面上。React完全不知道这个对象的存在，自然不会在浏览器中展示它。

解决方案：让React参与渲染流程 #

根据你的使用场景，有两种常见的解决方式：

1. 从React应用外部的普通JS函数渲染组件

如果你的Calling函数是在React应用之外（比如独立的脚本文件），可以使用ReactDOM.createRoot（React 18+）或ReactDOM.render（React 17及更早版本）将组件挂载到指定的DOM节点上：

import React from 'react';
import ReactDOM from 'react-dom/client';

class Extra extends React.Component {
  render() {
    return <div>我是Extra类组件</div>;
  }
}

function Greeting() {
  return <Extra />;
}

function Calling() {
  // 找到页面上用于挂载React组件的DOM节点（比如id为"root"的元素）
  const rootContainer = document.getElementById('root');
  // 创建React根并渲染组件
  const root = ReactDOM.createRoot(rootContainer);
  root.render(<Greeting />);
}

// 调用普通JS函数触发渲染
Calling();

2. 在React组件内部的普通JS函数中控制组件渲染

如果你的Calling函数是在React组件内部（比如事件处理函数），应该通过React状态来控制组件的显示/隐藏，而不是直接调用组件函数：

import React, { useState } from 'react';

class Extra extends React.Component {
  render() {
    return <div>我是Extra类组件</div>;
  }
}

function Greeting() {
  return <Extra />;
}

function MyReactComponent() {
  // 用状态控制是否渲染Greeting组件
  const [isGreetingVisible, setIsGreetingVisible] = useState(false);

  // 这是组件内部的普通JS函数
  function Calling() {
    setIsGreetingVisible(true); // 更新状态，触发React重新渲染
  }

  return (
    <div>
      <button onClick={Calling}>点击显示Greeting</button>
      {/* 当状态为true时，渲染Greeting组件 */}
      {isGreetingVisible && <Greeting />}
    </div>
  );
}

总结 #

React组件不是普通的函数——你不能只通过调用函数来让它显示在页面上。必须让React参与进来：要么通过ReactDOM将组件挂载到DOM，要么在React组件内部通过状态管理来触发条件渲染。这样React才能处理JSX的转换、组件的生命周期，最终把UI渲染到浏览器中。

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