时间戳

首页 > 解决方案 > 如何从另一个文件导入 React 组件（不带 React 应用程序）

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

问题描述

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

这是我的目录结构：

react
----components
-------- 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;

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

标签： reactjsimportreact-component

解决方案

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

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 文档如何初始化 React 应用程序。

推荐阅读