在if else语句中切换Class-React

Question

我试图在React中切换一个类（仅在else语句中）。

class Inf extends React.Component {

    constructor() {
      super();
      this.state = {
        pizzaData: data
    }
    }
    renderList(info){
      const list = this.state.pizzaData.map((entry, index) => {
              if (entry.occupied==true){
               return <li class="coloring" key={index}>Seat: {entry.seat}{entry.row}</li>;
             }
             else{
               return <li class="colored" key={index}>Seat: {entry.seat}{entry.row}</li>;
             }
           });
           return(
               <ul>{list}</ul>
           )
  }

现在，查看一些文档，我不确定如何做到这一点。我知道需要在li上进行“切换”并且（我认为）在this.state = {：

pizzaData:data
},
handleClick function(

但我不确定。

Answer 1

我创建了一个简单的示例，说明如何更新代码，还有两个组件（类似于@THEtheChad的想法），但没有使用context，因为根据react docs，如果你希望你的应用程序稳定，不鼓励直接使用context 。如果应用程序中的state和props管理太复杂，你可以包括redux（内部也使用context），但是现在我不包括redux，因为在这个简单的情况下可能会过度复杂化。

这是PizzaList，其pizzas上有state。该组件将呈现PizzaItem组件并向下传递回调，以便每个PizzaItem可以在单击时通知其父组（PizzaList）。 PizzaList有责任在点击时切换PizzaItem。

class PizzaList extends React.PureComponent {
    state = {
      pizzas: []
    }
    componentDidMount() {
      // fetch data about pizzas via an API and perform this.setState
      this.setState({ pizzas: [{ seat: 20, occupied: false }, { seat: 10, occupied: true }, { seat: 30, occupied: true }] });
    }
    handlePizzaItemClick = (pizzaInd) => {
      this.setState((prevState) => {

        // find clicked pizza and toggle its occupied property
         const pizzas = prevState.pizzas.map((pizza, ind) => {
            if (ind === pizzaInd)
               return { ...pizza, ...{ occupied: !pizza.occupied } };

            return pizza;
         });

        return { pizzas: pizzas };
      });
    }
    render () {
        return (
            <ul>
              {this.state.pizzas.map((pizza, index) => 
                <PizzaItem 
                  onClick={this.handlePizzaItemClick} 
                  index={index} 
                  pizza={pizza}
                />)}
            </ul>
        );
    }
}

PizzaItem是一个没有任何状态的简单函数组件。

const PizzaItem = ({ index, pizza, onClick }) => {
    const { seat, row, occupied } = pizza;
    const pizzaClassName = occupied ? 'coloring' : 'colored';

    return (
      <li key={index} 
        className={pizzaClassName} 
        onClick={() => onClick(index)}> 
        Seat: {seat} {row}
      </li>
    );
}

这是一个关于codesandbox的工作示例。

Answer 2

我会更新你的代码并将它分成两个组件，一个列表组件和一个项目组件（在这种情况下是披萨？）。列表组件将提供使用上下文API修改列表的方法。在我的例子中，我有一个updatePizza方法，我在上下文中传递。

然后，在子组件中，您有一个单击处理程序，用于更新比萨饼的occupied状态，并使用上下文方法告诉父母新状态是什么。

这可确保父组件始终具有所有比萨饼的当前状态，并将其传递给子组件。父组件成为这里的唯一事实来源。

class List extends React.Component {
  static childContextTypes = {
    updatePizza: React.PropTypes.func
  }

  constructor({ pizzas }){
    super()
    this.state = { pizzas }
  }

  updatePizza = (idx, pizza) => {
    this.setState( ({ pizzas }) => {
      pizzas[idx] = pizza;
      return { pizzas }
    })
  }

  getChildContext() {
    return { updatePizza: this.updatePizza }
  }

  render(){
    return <ul>{this.state.pizzas.map((pizza, idx) => <Pizza key={ idx } { ...pizza }>)}<ul>
  }
}

class Pizza extends React.Component {
  static contextTypes = {
    updatePizza: React.PropTypes.func
  }

  handleClick = () => {
    this.state.occupied = !this.state.occupied;
    this.context.updatePizza(this.state.key, this.state)
  }

  render() {
    const { key, seat, row, occupied } = this.state;
    const status = occupied ? 'coloring' : 'colored';
    return <li key={ key } className={ status } onClick={ handleClick }> Seat: { seat } { row }</li>
  }
}