如何从另一个文件导入 React 组件（w/out React 应用程序）

Question

我正在将一些 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;

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

Answer 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>

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

那就是普通的import-export。

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

如何从另一个文件导入 React 组件（w/out React 应用程序）

How to import React component from another file (w/out React app)

import

reactjs

react-component