如何从另一个文件导入 React 组件（不带 React 应用程序）答案

【问题标题】：How to import React component from another file (w/out React app)如何从另一个文件导入 React 组件（不带 React 应用程序）
【发布时间】：2020-09-25 11:33:12
【问题描述】：

我正在向我的 HTML 模板中添加一些 React 脚本，并且我正在尝试将 React 代码分离到单独的文件中。我还没有启动一个成熟的 React 应用程序。因此，我尝试将较小的组件从其他文件导入到“主”React 脚本中。

这是我的目录结构：

反应
----组件
--------Tag.js
--------Definition.js
----Definitions.js

这是我的 Definitions.js 代码（“主要”React 脚本）：

import Definition from './components/Definition';

class Definitions extends React.Component {
    ...
    render() {
        return <Definition definition={definition} />;
    }
}

ReactDOM.render(<Definitions />, document.querySelector("#definitions"));

这是我的 Definition.js 代码：

import Tag from './Tag';

class Definition extends React.Component {
    ...

    render() {
        return <Tag tag={tag} />;
    }
}

export default Definition;

此代码未呈现任何组件。我做错了什么？

【问题讨论】：

您需要澄清它不工作的确切程度。什么都没有渲染？错误？
你在这里少了一个点：import Definition from '../components/Definition';
@SakoBu，没用。
您是否导出组件？尝试制作一个codeandbox：codesandbox.io/s/react-template-t80qj
@DennisVash 不，我没有导出。我将导出语句添加到我的问题中，但仍然无法正常工作。

标签： reactjs import react-component

【解决方案1】：

在此之前，您需要使用ReactDOM.render 将 React 应用程序渲染到实际的 DOM，因此您需要导入它并定位一个有效元素：

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <>React App Example</>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

// target a valid element in index.html
<div id="root"></div>

这就是为什么你没有收到任何错误的原因，你甚至没有初始化应用程序。

然后它只是一个正常的导入导出。

请参考 React 文档how to initial a React app。

【讨论】：