我有一个应用程序,首先显示基于道具的汽车列表,但单击一个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
的初始状态设置为falsebuttonClicked
时,切换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} />)}
任何帮助是极大的赞赏。
这是我能提出的最简单的解决方案。您需要在某些地方替换自己的代码。但是您的一些代码已被删除,因为它会导致问题并使问题过于复杂。您应该能够在此答案中找到问题的解决方案,但它不会像复制粘贴那样简单。
你的清单:
对于其他两个核对表项(由于代码格式问题而省略)。你可能想要使用状态,而不是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>
)
}
}
注意:我省略了一些代码,因为我无法在不访问所有使用的文件的情况下重新创建环境。这应该足以让我们了解基本的想法。
将我的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>
);
}
}
您可以使用三元运算符。像这样
{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}/>)})}