javascript - 在if else语句中切换类- react

我试图在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上必须有一个“ toggle”，（在我看来）在this.state = {下：

pizzaData:data
},
handleClick function(

但我不确定。

最佳答案

我创建了一个简单的示例，说明如何使用两个组件（与@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上的工作示例。

关于javascript - 在if else语句中切换类- react ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48045679/