Условное форматирование JSX при нажатии кнопки

Question

У меня есть приложение, которое сначала показывает список автомобилей на основе реквизита, но нажатие кнопки sort преобразует отображение в алфавитный список.

Я пытаюсь установить функцию, которая изменяетсостояние buttonClicked каждый раз, когда нажимается кнопка sort (запускается sortAlphabetically.

. Учебник по условному рендерингу в документах React сфокусирован на тексте внутри кнопки,но я пытаюсь условно визуализировать JSX в моем методе рендеринга, основываясь на том, нажата ли отдельная кнопка.

Вот мой код, который возвращает Parsing error: this is a reserved word.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import CarCard from '../components/CarCard';
import CarForm from './CarForm';
import './Cars.css';
import { getCars } from '../actions/cars';
import { sortCar } from '../actions/cars';

Component.defaultProps = {
  cars: { cars: [] }
}

class Cars extends Component {
  constructor(props) {
    super(props)
      this.state = {
        cars: [],
        sortedCars: [],
        buttonClicked: false
      };
  }

sortAlphabetically = () => {
    handleSortClick();
    const newArray = [].concat(this.props.cars.cars)
    const orgArray = newArray.sort(function (a,b) {
      var nameA = a.name.toUpperCase();
      var nameB = b.name.toUpperCase();
      if (nameA < nameB) {
        return -1;
      } else if (nameA > nameB) {
        return 1;
      } 
      return 0;
    })  
    this.setState({ cars: {cars: orgArray} })
}

componentDidMount() {
     this.props.getCars()
    // this.setState({cars: this.props.cars})
  }

 handleSortClick() {
    this.setState({
      buttonClicked: !this.state.buttonClicked})
  }

render() {

  const buttonClicked = this.state.buttonClicked
  let display;

  if (this.state.buttonClicked = false) {
    display = {this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car}/>)}  
  } else {
{this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)}  
  }
    return (
<div className="CarsContainer">
    <h3>Cars Container</h3> 
        <button onClick={this.sortAlphabetically}>Sort</button>
        {display}
        <CarForm />
    </div>
    );
  }
}

 const mapStateToProps = (state) => {
  return ({
    cars: state.cars
  })
}

const mapDispatchToProps = (dispatch) => {
  return {
    sortCar: (cars) => dispatch(sortCar(cars)),
    getCars: (cars) => dispatch(getCars(cars))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cars);

В конечном счете, я пытаюсь сделать следующее:

• имеет начальное состояние buttonClicked, установленное в false
• , чтобы переключать логическое значение buttonClicked всякий раз, когда sortAplhabeticallyвыполняется
• дисплей this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car}/>)} когда ложь
• дисплей {this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)} когда true

Любая помощьс благодарностью.

Answer 1

Вот самое простое решение, которое я могу придумать.Вам нужно будет заменить свой собственный код в некоторых местах.Но часть вашего кода была удалена, потому что это вызывает проблемы и чрезмерно усложняет проблему.В этом ответе вы сможете найти решение своей проблемы, однако это будет не так просто, как вставить копию.

ваш контрольный список:

• имеет начальное состояние buttonClicked setв false: сделано
• переключать логическое значение buttonClicked при каждом запуске sortAplhabetically: вместо этого я просто сортирую массив машин.

Для двух других элементов контрольного списка (опущеноиз-за проблем с форматированием кода).Возможно, вы захотите использовать состояние, а не в том случае, если в противном случае будет указано состояние Xиспользуемые файлыЭтого все еще должно быть достаточно для ознакомления с основными идеями.

Answer 2

Хранит мой JSX в переменных, которые будут отображаться при условии:

render() {

 let message
   if (this.state.buttonClicked) {
    message = this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car}/>)  
  } else {
  message = this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)
 }

return (
<div className="CarsContainer">
    <h3>Cars Container</h3> 
    <button onClick={this.sortAlphabetically}>Sort</button>
    {message}
    <CarForm />
</div>
);
   }
 }

Answer 3

Вы можете использовать троичный оператор. Как это

{this.state.buttonClicked ? ({this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)}) : (this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car}/>)})}