Javascript React.js-根据门谜题答案更改图像

我在React.js中制作了一个小游戏：

演示： App.js文件：

我希望在中心按钮中渲染与choosen框架匹配的图片。3个Vue渲染Vue，3个react-react等

我该如何制定这样做的逻辑

是否有一些实验性的方法，比如在应用程序和圆圈组件中放置一个颜色类锚，但它似乎根本不读取当前状态，至少从当前角度看不到，也尝试在链接中实际使用react router和encolse圆圈组件，但无论出于何种原因，这确实会搞砸css

---

真的没有人能胜任这项任务吗？

对于这样一个简单的应用程序，还没有必要集成redux/mobx。我推荐的是在React中非常常见的一种方法，那就是

我们可以通过三个步骤来实现这一点：

将

圈

，

圈两个

，

圈三个

组件静音。他们只需要知道当前角度是多少就可以进行渲染

ClawCircle

应该被告知要渲染的图像（或空白）

App

需要保存所有这些信息的状态（因此我们将状态从

CircleX

提升到其父级，

App

）

第一步 与其将

currentAngle

保持在状态，不如假设信息是通过prop

currentAngle

提供给我们的。当一个圆圈被点击时，我们会告诉创建该圆圈的人我们被点击了，因为他们会给我们传递一个名为

onClick

的道具

因为我们现在不需要跟踪我们的状态，所以我们可以使组件无状态，只需将其转换为功能组件

例如，

CircleOne

可能看起来更像这样：

const CircleOne = ({ currentAngle, onClick }) => (
  <div
    className="App-logo small-logo"
    alt="logo"
    style={{ transform: `rotateZ(${currentAngle}deg)` }}
    onClick={onClick}
  >
    <div className="little-circle one react">
    {/* ... rest of your divs */}
  </div>
);

顺便说一下，绑定调用可以在构造函数中完成，而不是在render方法中完成，这样我们就不必在每次组件重新呈现时都重新绑定

constructor(props) {
  super(props);
  // constructor code
  this.rotateCircle = this.rotateCircle.bind(this);
}

// later: onClick={this.rotateCircle}

步骤3 这是一个更复杂的步骤，因为我们现在必须将繁重的工作委托给

App

，而不是单个

Circle

s

因此，

App

需要知道每个圆的角度，并处理单击每个圆时发生的情况。此外，当角度改变时，我们要检查三个角度是否相等。如果它们相等，我们需要告诉

ClawCircle

要渲染的图像

总而言之，它可能看起来像这样：

const CircleOne = ({ currentAngle, onClick }) => (
  <div
    className="App-logo small-logo"
    alt="logo"
    style={{ transform: `rotateZ(${currentAngle}deg)` }}
    onClick={onClick}
  >
    <div className="little-circle one react">
    {/* ... rest of your divs */}
  </div>
);

编辑：在这里动态编写代码之前，我应该尝试运行此代码。这是完整版本（已测试！）只需确保CSS中有

claw react

claw vue

和

claw angular

规则

import React, { Component } from 'react';
import './App.css';
import { CSSTransitionGroup } from 'react-transition-group';

class HalfCircle extends Component {      
  render() {
    return (
          <div className="App-logo half-circle" alt="logo">
          </div>
    );
  }
}

const Circleone = ({ currentAngle, onClick }) => (
  <div
    className="App-logo small-logo"
    alt="logo"
    style={{ transform: `rotateZ(${currentAngle}deg` }}
    onClick={onClick}
  >
    <div className="little-circle one react"></div>
    <div className="little-circle two angular"></div>
    <div className="little-circle three vue"></div>
  </div>
);


const Circletwo = ({ currentAngle, onClick }) => (
  <div
    className="App-logo big-logo"
    alt="logo"
    style={{ transform: `rotateZ(${currentAngle}deg` }}
    onClick={onClick}
  >
    <div className="little-circle un react"></div>
    <div className="little-circle dos angular"></div>
    <div className="little-circle tres vue"></div>
  </div>
);


const Circlethree = ({ currentAngle, onClick }) => (
  <div
    className="App-logo biggest-logo"
    alt="logo"
    style={{ transform: `rotateZ(${currentAngle}deg` }}
    onClick={onClick}
  >
    <div className="little-circle ein react"></div>
    <div className="little-circle zwei angular"></div>
    <div className="little-circle drei vue"></div>
  </div>
);

class ClawCircle extends Component {      
  constructor(props){
    super(props)
    this.state = {
      currentAngle: 45,
      anglePerClick: 360,
    }
  }  
  rotateCircle() {
    const { currentAngle, anglePerClick } = this.state;
    this.setState({ 
      currentAngle: currentAngle + anglePerClick 
    })
  }
  render() {
    const circleStyle = {
      transform: `rotateZ(${this.state.currentAngle}deg)`
    }

    return (
      <div
        className={`App-logo claw-circle ${this.props.imageName}`}
        alt="logo"
        style={circleStyle}
        onClick={this.rotateCircle.bind(this)}
      />
    );
  }
}

const getNameForAngle = (one, two, three) => {
  if (one === two && one === three) {
    switch(one) {
      case 120:
        return 'claw-react';
      case 240:
        return 'claw-vue';
      case 360:
        return 'claw-angular';
      default:
        return '';
    }
  }

  return '';
};

class App extends Component {  

  constructor(props) {
    super(props);

    this.state = {
      oneAngle: 120,
      twoAngle: 120,
      threeAngle: 120,
    };

    this.handleOneClick = this.handleOneClick.bind(this);
    this.handleTwoClick = this.handleTwoClick.bind(this);
    this.handleThreeClick = this.handleThreeClick.bind(this);
  }

  handleClick(circle) {
    const nextAngle = this.state[circle] + 120;
    this.setState ({
      [circle]: nextAngle
    });
  }

  handleOneClick() {
    this.handleClick('oneAngle');
  }

  handleTwoClick() {
    this.handleClick('twoAngle');
  }

  handleThreeClick() {
    this.handleClick('threeAngle');
  }

  render() {  
    const { oneAngle, twoAngle, threeAngle } = this.state;

    const imageName = getNameForAngle(oneAngle, twoAngle, threeAngle);

    return (
      <div className="App">
        <header className="App-header">
          <Circleone
            currentAngle={oneAngle}
            onClick={this.handleOneClick}
          />
          <Circletwo
            currentAngle={twoAngle}
            onClick={this.handleTwoClick}
          />
          <Circlethree
            currentAngle={threeAngle}
            onClick={this.handleThreeClick}
          />    
          <ClawCircle imageName={imageName} />
          <HalfCircle/>
        </header>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从'react transition group'导入{CSSTransitionGroup}；
类半圆形扩展组件{
render（）{
返回(
);
}
}
const Circleone=（{currentAngle，onClick}）=>(
);
const Circletwo=（{currentAngle，onClick}）=>(
);
const Circlethree=（{currentAngle，onClick}）=>(
);
类扩展了组件{
建造师（道具）{
超级（道具）
此.state={
当前角度：45，
anglePerClick:360，
}
}  
旋转圆（）{
const{currentAngle，anglePerClick}=this.state；
这个.setState（{
当前角度：当前角度+角度点击
})
}
render（）{
常数圆样式={
transform:`rotateZ（${this.state.currentAngle}deg）`
}
返回(
);
}
}
const getNameForAngle=（一、二、三）=>{
如果（一===2&&1===3）{
开关（一）{
案例120：
返回“爪反应”；
案例240：
返回“爪vue”；
案例360：
返回“爪角”；
违约：
返回“”；
}
}
返回“”；
};
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
角度：120，
twoAngle:120，
三角：120，
};
this.handleOneClick=this.handleOneClick.bind（this）；
this.handleTwoClick=this.handleTwoClick.bind（this）；
this.handleThreeClick=this.handleThreeClick.bind（this）；
}
把手舔（圆）{
const nextAngle=this.state[circle]+120；
这是我的国家({
[圆圈]：nextAngle
});
}
handleOneClick（）{
这个.handleClick（'oneAngle'）；
}
handleTwoClick（）{
这个.handleClick（'twoAngle'）；
}
handleThreeClick（）{
这个.handleClick（'threeAngle'）；
}
render（）{
const{oneAngle，twoAngle，threeAngle}=this.state；
const imageName=getNameForAngle（一个角度、两个角度、三个角度）；
返回(
);
}
}
导出默认应用程序；

好吧，看来组件封装真的不喜欢这里的乐趣之王，不管怎样，我让应用程序使用纯js，所有变量都是全局变量

如果有人需要密码笔，请看这里：

当然还有JS代码：

var angle=0;
var angle2=0;
var angle3=0;

count = 0;
count2 = 0;
count3 = 0;

document.getElementById("small-logo").addEventListener("click", rotateCircle)
document.getElementById("big-logo").addEventListener("click", rotateCircle2)
document.getElementById("biggest-logo").addEventListener("click", rotateCircle3)

function rotateCircle(){
angle+=120;
this.style.webkitTransform="rotate("+angle+"deg)";
count += 1;
if (count > 2) {
  count = 0;
}
}  
function rotateCircle2(){
angle2+=120;
this.style.webkitTransform="rotate("+angle2+"deg)";
count2 += 1;
if (count2 > 2) {
  count2 = 0;
}
}
function rotateCircle3(){
angle3+=120;
this.style.webkitTransform="rotate("+angle3+"deg)";
count3 += 1;
if (count3 > 2) {
  count3 = 0;
}
}

angular = "background-image: 
url(https://raw.githubusercontent.com/Blazej6/Door-
game/master/src/img/angular.png);"
react = "background-image: 
url(https://raw.githubusercontent.com/Blazej6/Door-
game/master/src/img/react.png);"
vue = "background-image: url(https://raw.githubusercontent.com/Blazej6/Door-
game/master/src/img/vue.png);"

document.getElementById("claw-circle").addEventListener("click", 
changeCenter)
var x = document.getElementById("claw-circle")


function changeCenter() {
if (count == 0 && count2 == 0 && count3 == 0) {
x.style.cssText = angular;
} else if(count == 1 && count2 == 1 && count3 == 1) {
x.style.cssText = react;  
} else if(count == 2 && count2 == 2 && count3 == 2) {
x.style.cssText = vue;  
}
}

---

我的第一个想法是根据元素的“currentAngle”创建一个函数来渲染不同的图像，但你不知道怎么做。如果你知道每个“环”（react、angular或vue）的初始状态，并且你知道单击后的下一个状态（可能有助于创建一个数组

['react'、'angular'、'vue']

，并存储每个“环”的索引）在状态中），然后您可以设置父组件中每个环的当前状态（每个环可以调用父组件传入的“handleClick”函数prop）。嗯，但在这种情况下，claw circle不是父组件，您的意思是我可以将其子组件的状态存储在App组件中，然后将其传递给claw？也许我应该用状态管理来处理这个问题，也就是redux/mobx？这个主意可能不错，但是