1
votes

changement d'état dérivé des accessoires avant le rendu

J'ai le composant React MUI Switch qui change son état d'interface utilisateur sur le prop vérifié = {this.state.checked}

class Switch extends Component {
    state = { 
      active : this.props.contData.statesValue.active,
      checked: false
     }
    render() { 
        const { classes, theme } = this.props; 
        return ( 
            <MuiSwitch checked={this.state.checked}/>      
        )
    }
}

Le commutateur s'attend à ce que le prop vérifié soit une chaîne, 'true' | 'false'.

J'essaie de définir l'accessoire vérifié en utilisant l'état actif: this.props.contData.statesValue.active , cependant, ceci est reçu comme booléen 0 1 et lorsqu'il est passé dans les accessoires Switch comme checked = {this.state.active} entraîne l'erreur

Type d'accessoire ayant échoué: Prop coché non valide fourni à SwitchBase .

Ma question est donc la suivante: comment puis-je changer le prop actif entrant de 0 1 en une chaîne 'true' | 'false' avant le rendu du composant. Auparavant, j'aurais regardé vers la méthode componentWillReceiveProps, mais étant donné qu'elle est maintenant obsolète, tout pointeur sur la façon dont je peux y parvenir serait le bienvenu.

javascript reactjs material-ui

0 commentaires

3 Réponses :

0
votes

Si les accessoires sont des nombres entiers (0 ou 1), vous pouvez faire cette astuce (hack?):

render () {
  // [...]

  const checked = `${Boolean(this.props.contData.statesValue.active)`}
  // const checked = `${this.props.contData.statesValue.active}` // if it's true or false

  return ( 
    <MuiSwitch checked={checked} />      
  )
}

0 commentaires

1
votes

Switch de MUI peut utiliser une chaîne ou un booléen pour le coché prop, avec v1.0 +.

Dans ce cas, nous convertissons l'accessoire en booléen lors de l'initialisation de l'état, en utilisant la double négation !! éprouvée et vraie: p >

class Switch extends Component {
    state = { active: !!this.props.contData.statesValue.active };

    render() { 
        return <MuiSwitch checked={this.state.active}/>;
    }
}

0 commentaires

0
votes

Le Switch # checked dans Material UI accepte également un booléen.

Si vous n'avez pas d'autres raisons de maintenir l'état coché dans le composant, il suffit passez-le des accessoires au Switch comme ceci:

class Switch extends Component {
    render() {
        return ( 
            <MuiSwitch checked={this.props.contData.statesValue.active === 1}/>      
        )
    }
}

0 commentaires