Question

我的任务是创建一个流行的游戏节目Family Feud的克隆。我很难找到一个很好的方法来获取一个“回合”列表，每个回合都有一个问题和一系列答案（类似）

const Data = {
  round_1: {
    question: "A question",
    answers: ["one answer", "second one", ...etc]
  },
  round_2: {
    question: ...,
    answers: [...]
  },
  ...etc
}

然后将相关的轮次信息渲染到一个组件中，以便玩家可以前进和后退，并且只将相关的轮次信息映射到组件。类似的东西：

// Gameboard.js
import React from 'react'
import {Data} from './data'
export default class extends React.Component {
  componentWillMount() {
    const round = 1
    const ansArray = []
    const roundQuestion = Data.round_`${round}`.question
    const roundAnswers = Data.round_`${round}`.answers.map(ans=>{
      ansArray.push(ans)
    })
    this.setState({
      question: roundQuestion,
      answers: roundAnswers
    })
  }
handlePrevRoundClick() {
  this.setState({set to prev round})
}
handleNextRoundClick() {
  this.setState....
}
  render() {
    return (
      <div>
      <RoundInfo roundNum={this.state.round}/>
      <Round answers={this.state.answers}/>
      </div>
    )
  }
}

然后很明显，RoundInfo和Round组件只是通过道具传递信息。我让他们离开了这个例子，因为我认为我之后的逻辑只适用于这个主要的“Gameboard”组件。如果有必要，我会非常乐意扩大。我也意识到这里可能存在拼写错误和丢失的位。如果有人需要更多的东西继续下去，我会很高兴找到它。我确实有一个工作原型，我手动创建了每一轮自己的组件，但这绝对不是React Way ......

总结：我要求使用变量在对象列表之间来回“走动”的方法，只需要将当前轮次的信息映射到电路板。

谢谢！

Answer 1

就像你已经完成了大部分工作一样。完成你的工作：

// Gameboard.js
export default class extends React.Component {
  componentWillMount() {
    // init round to 0
    this.setState({
      round:0
    });
  }
  handlePrevRoundClick = () => {
    const round = this.state.round - 1;
    this.setState({round}); // update round
  }
  handleNextRoundClick= () => {
    const round = this.state.round + 1;
    this.setState({round}); // update round
  }
  render() {
    const curRoundData = Data['round_'+this.state.round];
    return (
      <div>
        <RoundInfo roundNum={this.state.round}/>
        <Round answers={curRoundData.answers}/>
        <div onClick={this.handlePrevRoundClick}>Go Prev</div>
        <div onClick={this.handleNextRoundClick}>Go Next</div>
      </div>
    )
  }
}

如何使用变量作为反应中的键来渲染和映射对象

1 个答案: