从 React 组件导出/导入常量

Question

我已经阅读了几个 Stack Overflow 问题和文章，试图找到一个我正在尝试做的简单示例，但一切似乎都过于复杂。我只想能够导出我在一个 React 组件的函数中创建的 const，然后导入以供另一个 React 组件使用。例如：

包含我要导出的constFirstArticle的组件：

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 放在单独的函数中并导出/导入该函数（有效但它导入另一个组件上的整个函数，我不知道如何只解析出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 钩子（尤其是 useState 和 useEffect）。

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