javascript - 在 if else 语句中切换类-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，其 state 上有 pizzas。该组件将呈现 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 上的一个工作示例.