Soy nuevo en React y estoy trabajando en un componente ya existente que parece un poco antiguo.
Tengo un elemento de etiqueta que quiero configurar dinámicamente, según el estado. A este efecto tengo:
export default class Address extends React.Component { // Props and other handlers componentTitle() { if (this.state.isPostal) { return this.state.labels.PostalAddressLabel } else { return this.state.labels.StreetAddressLabel } }; render() { return ( <div className="block"> <div className="grid-x"> <div className="input-field cell"> <label dangerouslySetInnerHTML={{ __html: componentTitle() }} /> // Other elements } }Sin embargo, esto no funciona. me sale el error
Error de referencia no detectado: el título del componente no está definido
He probado varias combinaciones de esto, incluyendo
Usando un var const compTitle = componentTitle() {
colocando la función dentro de la función render()
Y eliminando la función por completo y poniendo la condición if/else en la función render(), por ejemplo:
if (this.state.isPostal) { const compTitle = this.state.labels.PostalAddressLabel } else { const compTitle = this.state.labels.StreetAddressLabel } return ( <div className="block"> <div className="grid-x"> <div className="input-field cell"> <label dangerouslySetInnerHTML={{ __html: compTitle }}Pero simplemente no puedo hacer que funcione.
¿Alguien podría indicarme la dirección correcta?
En este código:
if (this.state.isPostal) { const compTitle = this.state.labels.PostalAddressLabel } else { const compTitle = this.state.labels.StreetAddressLabel } Usted, la variable compTitle solo vive dentro del alcance definido, que se encuentra entre las llaves. Entonces, después de la declaración if , esa variable ya no existe.
Sospecho que quieres algo como esto:
const compTitle = this.state.isPostal ? this.state.labels.PostalAddressLabel : this.state.labels.StreetAddressLabel return ( <div className="block"> <div className="grid-x"> <div className="input-field cell"> <label>{compTitle}</label>La forma más fácil de hacer esto es usando el operador ternario.
export default class Address extends React.Component { // Props and other handlers render() { const { isPostal, labels } = this.state; const compTitle = isPostal ? labels.PostalAddressLabel : labels.StreetAddressLabel; return ( <div className="block"> <div className="grid-x"> <div className="input-field cell"> <label dangerouslySetInnerHTML={{ __html: compTitle }} /> // Other elements ) } }use esta palabra clave this.componentTitle()