J'ai une application qui affiche d'abord une liste de voitures basée sur des accessoires, mais en cliquant sur un bouton J'essaie de définir une fonction qui Modifie l'état de Le tutoriel de rendu conditionnel dans Le réact de Documents est axé sur le texte dans le bouton un bouton, mais j'essaie de rendre conditionnellement le JSX dans ma méthode de rendu en fonction de la cliquette ou non d'un bouton séparé. Voici mon code jusqu'à présent, qui retourne finalement, j'essaie de faire ce qui suit : Toute aide est grandement appréciée. trier convertit l'écran en une liste alphabétisée. ButtonClicked à chaque fois que le bouton est cliqué sur le bouton (qui exécute sortilphabétiquement . Erreur d'analyse: il s'agit d'un mot réservé .
ButtonClicked défini sur FALSE
BottonClicked Chaque fois que sortaplhabétiquement est exécuté
this.state.cars.cars.cars && this.state.cars.cars.map (voiture => {cela.props.cars.cars.cars && this.props.cars.cars.map (voiture =>
3 Réponses :
Vous pouvez utiliser un opérateur ternaire. Comme ça
{this.state.buttonclicked? ({ceci.props.cars.cars.cars && this.props.cars.cars.map (voiture =>
Je reçois une erreur due à ceci étant un mot réservé . Je ne pense pas pouvoir utiliser ce de cette façon
Sur {this.state.buttonclicked?
C'est ce que j'essaie de dire, écrivez le code ci-dessus dans votre fonction de rendu
Voici la solution la plus simple que je puisse trouver. Vous devrez remplacer votre propre code à certains endroits. Mais une partie de votre code a été supprimée car elle provoque des problèmes et compliquer trop la question. Vous devriez pouvoir trouver une solution à votre problème dans cette réponse, ce n'est pas aussi simple qu'une pâte de copie cependant.
Votre liste de contrôle: p>
pour les deux autres éléments de liste de contrôle (omis en raison des problèmes de mise en forme du code). Vous voulez probablement utiliser l'état, pas si x State X Serrer des accessoires. P>
class Cars extends Component {
constructor (props) {
super(props)
this.state = {
carList: [{ id: 'apple' }, { id: 'orange' }, { id: 'zealot' }]
}
}
sortAlphabetical () {
this.setState({
carList: this.state.carList.reverse()
})
}
render () {
const CarsList = () => {
return this.state.carList.map(car => {
return <li>{car.id}</li>
})
}
return (
<div className='CarsContainer'>
<h3>Cars Container</h3>
<button onClick={this.sortAlphabetical.bind(this)}>Sort</button>
<CarsList />
</div>
)
}
}
stocké mon JSX dans des variables qui rendraient la condition:
Je suis à peu près sûr que vos accessoires par défaut sont mal définis. Ils devraient être après votre classe et la syntaxe doit être modifiée en
Cars.defaultProps = {...