0
529
VistasSi la condición está dentro del mapa () Reaccionar
Tengo una función map() que necesita mostrar vistas según una condición. He mirado la documentación de React sobre cómo escribir condiciones y así es como puedes escribir una condición:
{if (loggedIn) ? ( // Hello! ) : ( // ByeBye! )}Aquí está el enlace: https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator
Entonces, traté de tomar ese conocimiento e implementarlo en mi aplicación React. Y resultó así:
render() { return ( <div> <div className="box"> {this.props.collection.ids .filter( id => // note: this is only passed when in top level of document this.props.collection.documents[id][ this.props.schema.foreignKey ] === this.props.parentDocumentId ) .map(id => {if (this.props.schema.collectionName.length < 0 ? ( <Expandable> <ObjectDisplay key={id} parentDocumentId={id} schema={schema[this.props.schema.collectionName]} value={this.props.collection.documents[id]} /> </Expandable> ) : ( <h1>hejsan</h1> )} )} </div> </div> ) }Pero no funciona..! Aquí está el error:
¡Agradezco toda la ayuda que pueda obtener!
3 Respuestas
Responde la pregunta0
Está utilizando tanto el ternary operator como if una condición, use cualquiera.
Por operador ternario:
.map(id => { return this.props.schema.collectionName.length < 0 ? <Expandable> <ObjectDisplay key={id} parentDocumentId={id} schema={schema[this.props.schema.collectionName]} value={this.props.collection.documents[id]} /> </Expandable> : <h1>hejsan</h1> }Por si condición:
.map(id => { if(this.props.schema.collectionName.length < 0) return <Expandable> <ObjectDisplay key={id} parentDocumentId={id} schema={schema[this.props.schema.collectionName]} value={this.props.collection.documents[id]} /> </Expandable> return <h1>hejsan</h1> }0
Hay dos errores de sintaxis en su condicional ternario:
- elimine la palabra clave
if. Compruebe la sintaxis correcta aquí . Le falta un paréntesis en su código. Si lo formateas así:
{(this.props.schema.collectionName.length < 0 ? (<Expandable></Expandable>) : (<h1>hejsan</h1>) )}
¡Espero que esto funcione!
0
Si eres minimalista como yo. Digamos que solo desea representar un registro con una lista que contiene entradas.
<div> {data.map((record) => ( record.list.length > 0 ? (<YourRenderComponent record={record} key={record.id} />) : null ))} </div>