从 React 组件导出/导入 Const

Question

我已经阅读了几个 Stack Overflow 问题和文章，试图找到一个简单的例子来说明我正在尝试做的事情，但一切似乎都过于复杂。我只想导出我在一个 React 组件的函数中创建的常量，并导入到另一个 React 组件中使用。例如：

包含我要导出的 const 的组件，FirstArticle:

function Articles() {
  const FirstArticle = document.querySelector('.article');
  console.log(FirstArticle) // <div class="article">Article 1</div>

  return (
    <div>
      <div class="article">Article 1</div>
      <div class="article">Article 2</div>
      <div class="article">Article 3</div>
    </div>
  )
}

export default Articles;

我要导入的组件 const FirstArticle:

import Articles, { FirstArticle } from "./Articles";

function Preview() {
  return (
    <div>
      {FirstArticle} // Would expect to see: <div class="article">Article 1</div>
    </div>
  )
}

export default Preview;

我尝试了一些不同的东西 - 将 const FirstArticle 移到 Articles 函数之外以使其更“全局”，将 const 放在一个单独的函数中并且 exporting/importing 该函数（有效，但它在另一个组件上导入了整个函数，我不确定如何解析出 FirstArticle const），并在 export default 行中导出 const 以及函数（没用）。

我读到我可能需要使用 useState。由于我是 React 的新手，所以我对此不太熟悉。 useState 是我需要研究的解决方案吗？

Answer 1

为什么不为不同的组件使用不同的文件？类似于：

// useArticles.js
export function useArticles() {
  return [...something]; // the array of articles
}

// Article.js
export function Article(props) {
  const {article} = props;
  return <div class="article">
    {/* ...here you render a single article */}
  </div>;
}

// Articles.js
import { Article } from './Article';
import {useArticles} from './useArticles';
export function Articles() {
  const articles = useArticles();
  return <div>
    {articles.map(article => <Article key={article.id} article={article} />)}
  </div>;
}

// Preview.js
import {Article} from './Article';
import {useArticles} from './useArticles';
function Preview() {
  const articles = useArticles();
  const firstArticle = articles[0];
  return (
    <div>
      <Article article={firstArticle} />
    </div>
  )
}

export default Preview;

顺便说一句，如果您是 React 新手并且不知道 useState，我建议您在继续之前学习 React Hook（特别是 useState 和 useEffect）。

此外，在 React 中，您应该始终首先考虑数据，然后再考虑如何渲染它们，最好避免从渲染组件获取数据。

从 React 组件导出/导入 Const

Exporting / Importing a Const from a React Component

javascript

export

constants

reactjs

react-hooks