Question

我有一个应用程序，该应用程序首先显示基于道具的汽车列表，但是单击sort按钮会将显示内容转换为字母顺序列表。

我正在尝试设置一个函数，该函数每次单击buttonClicked按钮（运行sort时都会更改sortAlphabetically的状态。

React文档中的条件渲染教程的重点是在按钮内文本，但是我试图根据是否有单独的按钮来在我的render方法中有条件地渲染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}/>)}时 false
在真

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

非常感谢您的帮助。

Answer 1

这是我能想到的最简单的解决方案。您将需要在某些地方替换您自己的代码。但是您的某些代码已被删除，因为它会引起问题并使问题变得过于复杂。您应该可以在此答案中找到解决问题的方法，但是，它不会像粘贴粘贴那样简单。

您的清单：

已将buttonClicked的初始状态设置为false：已完成
每当运行sortAplhabetically运行时，切换buttonClicked的布尔值：我不这样做，而是简单地对汽车数组进行排序。

对于其他两个清单项目（由于代码格式问题而被省略）。您可能想使用状态，如果不是X状态则使用状态。

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>
    )
  }
}

注意：我已经省略了一些代码，因为我无法在不访问所有使用的文件的情况下重新创建您的环境。这仍然足以理解基本思想。

Answer 2

将我的JSX存储在可以在以下条件下呈现的变量中：

/sites/wwwroot/public/index.php

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}/>)})}

按钮单击时有条件地格式化JSX

3 个答案: