Tengo una matriz de datos y, dentro de un componente de reacción, me gustaría representar algunos JSX en función de una propiedad de cada elemento de la matriz.
Este es el código hasta ahora:
return ( <div> <p> Render CMS Components for `{location.pathname}`</p> {componentItems.map(componentItem => ( if (componentItem.Name == "namehere") { <p>render compnent here</p> } if (componentItem.Name == "namehere2") { <p>render compnent 2 here</p> } if (componentItem.Name == "namehere3") { <p>render compnent 3 here</p> } ))} </div> ); } export default RenderCmsComponents;Para usar if dentro de la función de flecha de devolución de llamada del map , tiene que ser una función de flecha de cuerpo de función completa, no una de forma concisa, por lo que el primer carácter después de => tiene que ser { y debe tener un return explícito.
Algo como esto:
// ... return ( <div> <p> Render CMS Components for `{location.pathname}`</p> {componentItems.map(componentItem => { switch (componentItem.Name) { case "namehere": return <p key={componentItem.Id}>render compnent here</p>; case "namehere2": return <p key={componentItem.Id}>render compnent 2 here</p>; case "namehere3": return <p key={componentItem.Id}>render compnent 3 here</p>; // *** Recommend handling the default case where none matches! *** } })} </div> ); Pero si la parte <p>...</p> no cambia, la extraería para evitar repetirla:
// ... return ( <div> <p> Render CMS Components for `{location.pathname}`</p> {componentItems.map(componentItem => { let pbody; switch (componentItem.Name) { case "namehere": pbody = <TheFirstComponent />; break; case "namehere2": pbody = <TheSecondComponent />; break; case "namehere3": pbody = <TheThirdComponent />; break; // *** Recommend handling the default case where none matches! *** } return <p key={componentItem.Id}>{pbody}</p>; })} </div> );Si todos los componentes toman exactamente los mismos accesorios, también podría tener una tabla de búsqueda para ellos:
// ...in some unchanging part of things... const componentsByName = new Map([ ["namehere", TheFirstComponent], ["namehere2", TheSecondComponent], ["namehere3", TheThirdComponent], ]); // ...then... return ( <div> <p> Render CMS Components for `{location.pathname}`</p> {componentItems.map(componentItem => { let BodyComponent = componentsByName.get(componentItem.Name); if (!BodyComponent) { // Handle the fact you have no mapping } else { return <p key={componentItem.Id}><BodyComponent relevant="props" here /></p>; } })} </div> );Puede usar el operador && para esto:
import { Fragment } from 'react' // ... const conditionalRender(item) { return ( <Fragment> componentItem.Name == "namehere" && <p>render compnent here</p> componentItem.Name == "namehere2" && <p>render compnent 2 here</p> // etc.. </Fragment> ) } return ( <div> <p> Render CMS Components for `{location.pathname}`</p> {componentItems.map(conditionalRender)} </div> ); } export default RenderCmsComponents;solo necesita escribir la palabra clave "return" en la declaración if
export default function App() { var arr = ['abc' , 'pqr' , 'xyz']; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> { arr.map(i => { if(i == 'abc'){ return <p>ABC</p> } if(i == 'xyz'){ return <p>XYZ</p> } }) } </div> ); }