在该组件中触发事件时如何用另一个组件替换反应组件

Question

所以，我（Total react 初学者）有这个 React 组件。

import './cryptography.css';
import {useRef} from 'react';
import useInterval from 'react-useinterval';
import { useState } from 'react';

const DisplayTimer = () => {
    const [time, setTime] = useState(0);
    useInterval(() => {
        setTime(time + 1);
    }
        , 1000);

    const hours = Math.floor(time / 3600);
    const minutes = Math.floor((time % 3600) / 60);
    const seconds = time % 60;

    return (
        <div className="timer">
            <h3>Timer</h3>
            <p>{hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}</p>
        </div>
    )
}

const CryptoOne = () => {
    const inputRef = useRef();

    function verifyAnswer() {
        if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
            alert("Correct!");
        }
        else {
            alert("Wrong!");
        }
    }

    return (
        <div className="crypto-one">
            <h3>Level One</h3>
            <p>Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"</p>

            <input ref={inputRef} type="text" id="one-answer" name="one-answer" />
            <button onClick={verifyAnswer}>Submit</button>
        </div>
    )
}

const CryptoTwo = () => {
    const inputRef = useRef();

    function verifyAnswer() {
        if (inputRef.current.value === "IaMaHackerManHaHa") {
            alert("Correct!");
        }
        else {
            alert("Wrong!");
        }
    }

    return (
        <div className="crypto-two">
            <h3>Level Two</h3>
            <p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>

            <input ref={inputRef} type="text" id="two-answer" name="two-answer" />
            <button onClick={verifyAnswer}>Submit</button>
        </div>
    )
}

const CryptoThree = () => {
    const inputRef = useRef();

    function verifyAnswer() {
        let input = inputRef.current.value;
        let answer =  "SHA256".toLowerCase();
        
        if (input === answer) {
            alert("Correct!, completed the exercise");   
        }
        else {
            alert("Wrong!");
        }
    }

    return (
        <div className="crypto-three">
            <h3>Level Three</h3>
            <p>Identify the type of the hash (Type only the hash type, with no spaces) - "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"</p>

            <input ref={inputRef} type="text" id="three-answer" name="three-answer" />
            <button onClick={verifyAnswer}>Submit</button>
        </div>
    )
}

const Cryptography = () => {
    const [active, setActive] = useState("crypto-one");

    return (
        <div className="cryptography">
            <h1>Cryptography</h1>
            <DisplayTimer />
            <div className="crypto-container">
                <CryptoOne />
            </div>
        </div>
    )
}

export { Cryptography };

在这里，我有这个密码功能，它会显示一个问题，如果它是正确的，那个问题将被另一个问题代替。 我有 3 个单独的函数 CryptoOne、CryptoTwo 和 CryptoThree，它们将显示在函数 Cryptography 中。 这意味着如果 CryptoOne 问题的答案是正确的，那么它将被 CryptoTwo 替换，依此类推。 所以我的问题是我该怎么做？

提前致谢。

Answer 1

您可以在 Cryptography 组件中维护 activeIndex 状态。 并且有一个 changeSlide 方法，每次答案正确时， activeSlideIndex都会增加 1。 如下所示

const Cryptography = () => {
  const [active, setActive] = useState("crypto-one");
  const [activeIndex, setActiveIndex] = useState(1);

  const incrementIndex = () => {
    setActiveIndex(prevIndex => prevIndex + 1)
  }

  return (
    <div className="cryptography">
      <h1>Cryptography</h1>
      <DisplayTimer />
      <div className="crypto-container">
        {activeSlideIndex === 1 && <CryptoOne changeIndex={incrementIndex}  />}
        {activeSlideIndex === 2 && <CryptoTwo changeIndex={incrementIndex} />}
        {activeSlideIndex === 3 && <CryptoThree />}
      </div>
    </div>
  )
}

您可以将此changeSlide()方法作为道具传递给每个组件。 并在答案正确时调用它

const CryptoOne = ({changeIndex}) => {
  const inputRef = useRef();

  function verifyAnswer() {
    if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
      alert("Correct!");
      changeIndex()
    }
    else {
      alert("Wrong!");
    }
  }

  return (
    <div className="crypto-one">
      <h3>Level One</h3>
      <p>Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"</p>

      <input ref={inputRef} type="text" id="one-answer" name="one-answer" />
      <button onClick={verifyAnswer}>Submit</button>
    </div>
  )
}

const CryptoTwo = ({changeIndex}) => {
  const inputRef = useRef();

  function verifyAnswer() {
    if (inputRef.current.value === "IaMaHackerManHaHa") {
      alert("Correct!");
      changeIndex()
    }
    else {
      alert("Wrong!");
    }
  }

  return (
    <div className="crypto-two">
      <h3>Level Two</h3>
      <p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>

      <input ref={inputRef} type="text" id="two-answer" name="two-answer" />
      <button onClick={verifyAnswer}>Submit</button>
    </div>
  )
}

const CryptoThree = () => {
  const inputRef = useRef();

  function verifyAnswer() {
    let input = inputRef.current.value;
    let answer = "SHA256".toLowerCase();

    if (input === answer) {
      alert("Correct!, completed the exercise");
    }
    else {
      alert("Wrong!");
    }
  }

  return (
    <div className="crypto-three">
      <h3>Level Three</h3>
      <p>Identify the type of the hash (Type only the hash type, with no spaces) - "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"</p>

      <input ref={inputRef} type="text" id="three-answer" name="three-answer" />
      <button onClick={verifyAnswer}>Submit</button>
    </div>
  )
}