Necesito generar un código reactJS diferente basado en el modelo de datos, pero obtengo
En el archivo "~/Scripts/Grid.jsx": Error de análisis: Línea 13: Token inesperado si (en la línea 13, columna 15) Línea: 52 Columna: 3
con este codigo
var GridRow = React.createClass({ render: function() { var row; row = this.props.cells.map(function(cell, i) { return ( if(cell.URL != null && cell.URL.length > 0){ <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td> } else { <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td> } ); }.bind(this)); return ( <tr> {row} </tr> ); } });¿La parte de renderizado parece estar realmente limitada en cuanto a cómo se puede usar?
Pones la declaración de return dentro de la cláusula if así:
row = this.props.cells.map(function(cell, i) { if(cell.URL != null && cell.URL.length > 0){ return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>; } else { return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>; } }.bind(this));También podría usar una declaración ternaria (si/si no en línea). Podría verse así:
row = this.props.cells.map(function(cell, i) { return (cell.URL != null && cell.URL.length > 0) ? (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) : (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) }.bind(this));o es6
row = this.props.cells.map((cell, i) => (cell.URL != null && cell.URL.length > 0) ? (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) : (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) );pero, para facilitar la lectura, sugeriría la respuesta de nilgun.
Aunque eliminaría la declaración else, ya que es redundante. También puede eliminar los corchetes, esto es una cuestión de preferencia.
row = this.props.cells.map(function(cell, i) { if(cell.URL != null && cell.URL.length > 0) return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>; return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>; }.bind(this));