Reactjs 仅使用“开始”按钮隐藏和显示组件

我想在主组件中隐藏两个组件：

显示盒和游戏盒

当用户登录时，游戏自动启动

相反，我只想“显示”开始按钮

然后用户可以按开始按钮开始游戏。 （在“开始”按钮组件中最终将有更多级别可供选择）

import React，{useState，useffect}来自“React”；
导入“/home.js”；
从“../components/DisplayBox”导入DisplayBox；
从“../components/GameBox/GameBox”导入GameBox；
从“随机词”导入随机词
导入“/home.css”；
常量Home=（）=>{
常量[numleters，setnumleters]=useState（5）
const[word，setWord]=useState（“”）
const[blank，setBlank]=useState（）
控制台日志（“空白”，空白）；
console.log（“WORD”，WORD）
常量getARandomWord=（）=>{
setWord（randomWords（{justice:1，maxLength:4，格式化程序：（word）=>word.toUpperCase（）}）））
}
useffect（（）=>{
getARandomWord（）
}, [])
函数clickStart（）{
//返回{show:true}；
//警惕（“你开始！”）；
}
报税表（
开始
);
};
Home.propTypes={}；
导出默认主页；

创建一个新的

状态

，以监督游戏是否开始，然后：-

• Home.js

  ：-

import React，{useState，useffect}来自“React”；
导入“/home.js”；
从“../components/DisplayBox”导入DisplayBox；
从“../components/GameBox/GameBox”导入GameBox；
从“随机词”导入随机词
导入“/home.css”；
常量Home=（）=>{
常量[numleters，setnumleters]=useState（5）
const[word，setWord]=useState（“”）
const[blank，setBlank]=useState（）
//状态以跟踪游戏是否开始
常量[isStart，setIsStart]=useState（false）
控制台日志（“空白”，空白）；
console.log（“WORD”，WORD）
常量getARandomWord=（）=>{
setWord（randomWords（{justice:1，maxLength:4，格式化程序：（word）=>word.toUpperCase（）}）））
}
useffect（（）=>{
getARandomWord（）
}, [])
//处理游戏开始
函数handleGameStart（）{
如果（isStart）{
//游戏开始时做些什么
警报（'游戏开始！！！'）
//重新设置游戏
//setIsStart（错误）
}否则{
console.log（'游戏未开始！'）
}
}
//监督游戏开始后发生的事情的功能
useffect（（）=>{
handleGameStart（）
}，[isStart]）
报税表（
setIsStart（true）}style={{width:“800px”}}>
开始
{/*此选项仅在游戏开始时可用*/}
{isStart&&(
)}
);
};
Home.propTypes={}；
导出默认主页；

请求更多澄清问题不清楚嗨，我是新手，我编辑了我的问题，谢谢！很乐意帮忙

import React, { useState, useEffect } from "react";
import "./home.js";
import DisplayBox from '../components/displayBox';
import GameBox from '../components/gameBox/gameBox';
import randomWords from 'random-words'
import "./home.css";

const Home = () => {
  const [numLetters, setNumLetters] = useState(5)
  const [word, setWord] = useState("")
  const [blank, setBlank ] = useState()
  console.log("Blank", blank);
  console.log("WORD", word)
  const getARandomWord = () => {
    setWord(randomWords(({ exactly: 1, maxLength: 4, formatter: (word) => word.toUpperCase() })))
  }
  useEffect(() => {
    getARandomWord()
  }, [])



    function clickStart(){
    // return { show: true};
    //  alert('You Start!'); 
     }

     
    return ( 
    <>
     <div> 
     <button onClick={clickStart} style={{width:"800px"}}>
          START
      </button> 
     </div> 
      <DisplayBox word={word} />
      <GameBox numLetters={numLetters} setNumLetters={setNumLetters} word={word} setWord={setWord} getARandomWord={getARandomWord} />
    
    </>
  
    
  );
};
Home.propTypes = {};
export default Home;