Tengo el típico index.js que llama App.js
índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') );Aplicación.js
import './App.css'; import Test from './Components/test' import Test1 from './Components/test1' function App() { return ( <Test/>, <Test1/> ); } export default App;Cuando construí App.js , quería renderizar 2 componentes Test y Test1
Cuando ejecuto este código, solo se procesa uno de los componentes. En este caso, solo se representa Test1 . Si cambio el orden, solo se procesa la Prueba
¿Hay alguna manera de que pueda renderizar 2 componentes?
Solo puede representar un componente, por lo que un enfoque sería envolverlos en uno. Por ejemplo, en un React Fragment, así:
import { Fragment } from 'react' ... return ( <Fragment> <Test /> <Test1 /> </Fragment> )Fragment es solo un contenedor, no proporciona ninguna funcionalidad. Alternativamente, puede envolver sus componentes así:
return ( <> <Test /> <Test1 /> </> )El resultado sería el mismo.
Debe envolver esta Prueba y Test1 en alguna envoltura
import './App.css'; import Test from './Components/test' import Test1 from './Components/test1' function App() { return ( <div> <Test/>, <Test1/> </div> ); } export default App;prueba esto
function App() { return ( <> <Test /> <Test1 /> </> ) }