He leído varias preguntas y artículos de Stack Overflow tratando de encontrar un ejemplo simple de lo que estoy tratando de hacer, pero todo parece demasiado complicado. Solo quiero poder exportar una constante que creé en una función en un componente de React e importarla para usarla en otro componente de React. Por ejemplo:
Componente que contiene la const que quiero exportar, 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; Componente en el que quiero importar la 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; He intentado algunas cosas diferentes: mover el const FirstArticle fuera de la función Articles para hacerlo más "global", poner el const en una función separada y exportar/importar esa función (funciona pero importa toda la función en el otro componente y no estoy seguro de cómo analizar solo la const FirstArticle ), y exportar la const en la línea export default junto con la función (no funcionó).
Estoy leyendo que es posible que necesite usar useState . Como soy nuevo en React, no estoy muy familiarizado con esto. ¿Es useState la solución que necesito investigar?
¿Por qué no usar diferentes archivos para los diferentes componentes? Algo como:
// 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; Por cierto, si es nuevo en reaccionar y no conoce useState , le sugiero que aprenda los ganchos de reacción antes de continuar (particularmente useState y useEffect ).
Además, al reaccionar, siempre debe pensar en los datos primero y luego en cómo renderizarlos, será mejor evitar obtener datos de los componentes de renderización cuando sea posible.