如何从普通JavaScript函数调用React类组件？跨文件调用可行吗？

当然可以实现啦！不过要注意React组件的调用逻辑和普通JS函数不太一样，得按照React的规则来处理。下面分步骤给你讲清楚怎么操作：

第一步：先处理组件的导出导入 #

首先得让Example组件能被其他文件访问到，所以要在Example.js里导出它：

// Example.js
import React from 'react';

class Example extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Example; // 导出组件，让其他文件能导入使用

第二步：根据你的使用场景调用组件 #

分两种常见场景来处理：

场景1：Calling函数作为React渲染逻辑的一部分（返回React元素） #

如果你的Calling函数是用来生成React元素（比如作为某个父组件的渲染内容），直接像使用JSX标签一样调用组件就可以，还能传递props：

// Normal.js
import React from 'react';
import Example from './Example'; // 导入Example组件

function Calling() {
  // 直接返回Example组件的JSX形式，传递name属性
  return <Example name="World" />;
}

// 如果需要把这个函数当作组件使用，也可以导出它
export default Calling;

场景2：Calling函数在非React渲染环境中渲染组件到DOM #

如果你的Calling函数是想在普通JS逻辑里（比如按钮点击事件）把组件渲染到页面DOM中，需要用到ReactDOM的渲染方法（React 18+用createRoot，旧版本用render）：

// Normal.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Example from './Example';

function Calling() {
  // 先获取要挂载组件的DOM容器（比如页面上id为root的元素）
  const container = document.getElementById('root');
  // 创建根节点并渲染Example组件
  const root = ReactDOM.createRoot(container);
  root.render(<Example name="React" />);
}

// 举个例子：给按钮绑定点击事件，点击时调用Calling渲染组件
document.getElementById('renderBtn').addEventListener('click', Calling);

几个关键注意点 #

• React组件的首字母必须大写（你的Example已经符合要求），不然React会把它识别成普通HTML标签，导致渲染失败。
• 如果你的项目没有配置JSX编译（比如用Create React App、Vite这类工具会自动处理），要确保Babel等编译工具能正确解析JSX语法。

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