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

现在，查看一些文档，我不确定如何做到这一点。我知道需要进行一次切换＆＃34;关于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> ); } }时切换。{/ 1>

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> ); }是一个没有任何状态的简单函数组件。

tableView(_:cellForRowAt:)

以下是codesandbox上的一个工作示例。

Answer 2

我会更新您的代码并将其拆分为两个组件，列表组件和项目组件（在本例中为pizza？）。列表组件将提供使用上下文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>
  }
}

if else语句中的Toggle类 - React

2 个答案: