我已經閱讀了幾個 Stack Overflow 問題和文章，試圖找到一個我正在嘗試做的事情的簡單示例，但一切似乎都過于復雜。我只想能夠匯出我在一個 React 組件的函式中創建的常量，然后匯入到另一個 React 組件中使用。例如：
包含const我要匯出的組件FirstArticle：
function Articles() {
const FirstArticle = document.querySelector('.article');
console.log(FirstArticle) // <div >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常量），并將export default行中的常量與函式一起匯出（不起作用）。
我正在閱讀我可能需要使用useState. 由于我是 React 的新手，因此我對此不太熟悉。是useState我需要研究的解決方案嗎？
uj5u.com熱心網友回復：
為什么不對不同的組件使用不同的檔案？就像是：
// 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 './FirstArticle';
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）。
此外，在反應中，您應該始終首先考慮資料，然后再考慮如何渲染它們，最好避免在可能的情況下從渲染組件獲取資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/378279.html
標籤：javascript 反应 反应钩子 常数 出口