React Hooks替代类组件实现启动屏显隐及报错修复

Let's work through fixing your error and converting the Homescreen class component to React Hooks, while also fixing the state management issues that are preventing your UI from updating correctly.

First, Let's Diagnose the Original Error #

That this.props.clickevent is not a function error is almost certainly a case-sensitive typo—your class component calls this.props.clickEvent() (capital E), but if you accidentally passed the prop as clickevent (lowercase e) anywhere, that would trigger this error. We'll eliminate this risk entirely as we refactor to Hooks.

Another critical issue: Your global variables isGameOn and gamesPlayed won't trigger React re-renders. When you update them manually, the components have no way of knowing to refresh, so your homescreen won't hide even after setting isGameOn = true. We'll replace these with React's useState hook to manage state properly.

Updated App Component (with Proper State Management) #

First, let's fix the App component to use React state instead of global variables:

import React, { useState } from 'react';
import Homescreen from './homescreen';

export default function App() {
  // Use useState to track game state and total games played
  const [isGameOn, setIsGameOn] = useState(false);
  const [gamesPlayed, setGamesPlayed] = useState(0);

  function startGame() {
    // Update games played using the previous state value
    setGamesPlayed(prevCount => prevCount + 1);
    // Toggle the game state to hide the homescreen
    setIsGameOn(true);
  }

  return (
    <Homescreen 
      gameOn={isGameOn} 
      gamesWon={gamesPlayed} 
      clickEvent={startGame}
    />
  );
}

Converted Homescreen to React Hooks (Function Component) #

Now let's rewrite Homescreen as a simple function component—no more class, constructor, or method binding needed:

import React from 'react';
import './homescreen.css';

// Destructure props directly in the function parameters for clarity
export default function Homescreen({ gameOn, gamesWon, clickEvent }) {
  return (
    <div className={`homescreen ${gameOn ? "homescreen--hidden" : "homescreen--visible"}`}>
      <div className="homescreen__box">
        <h1 className="homescreen__title">Space&nbsp;Matcher</h1>
        <div className="homescreen__stats">
          Games Played: <strong className="homescreen__number">{gamesWon}</strong>
        </div>
        <button 
          className="homescreen__shuffle-button" 
          onClick={clickEvent}
        >
          Start!
        </button>
      </div>
    </div>
  );
}

Key Changes Explained #

• State Management: Replaced global variables with useState in the App component. This ensures that when isGameOn or gamesPlayed updates, React automatically re-renders the components to reflect the new state.
• Simplified Component: The Homescreen function component directly uses props without needing this.props, constructor, or bind calls. The onClick handler just references the clickEvent prop directly.
• Fixed Class Logic: Updated the className condition to show homescreen--visible when the game is not active, and homescreen--hidden when it is. Your original code had this reversed!
• Typo Prevention: Prop destructuring makes it explicit which props we're using, reducing the chance of case-sensitive typos like the one that caused your original error.

CSS Note #

Your existing animation CSS will work perfectly with these changes—just ensure your pop-away animation handles hiding the homescreen smoothly (avoid display: none mid-animation, as it will break the transition).

内容的提问来源于stack exchange，提问作者Charles Christenson