Javascript 如何改进此组件或将其拆分为较短的组件？

我是个新来的反应者，我唯一能让它起作用的方法就是这样。但与我拥有的其他组件相比，它似乎大得离谱

这里我基本上有4个选择，每个选择取决于前一个选择，显示我从一个JSON获取的信息

例如： 我需要知道选择了哪个

游戏

，然后显示该游戏可用的

型号列表

，然后显示该型号可用型号列表，等等

我尝试了

useContext

和

props

，但没有成功

import React, { useState, useEffect } from 'react';
// JUST LAYOUT RELATED STUFF
import Container from '../components/layout/Container';
import Logo from '../components/layout/Logo';
import VerticalAd1 from '../components/modelviewerpage/VerticalAd1';

export default function ModelViewerPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [gameListData, setGameListData] = useState({});
  const [selectedGame, setSelectedGame] = useState(null);
  const [selectedType, setSelectedType] = useState(null);
  const [selectedModel, setSelectedModel] = useState(null);

  useEffect(() => {
    fetch(
      'https://static.teemo.gg/teemo/sites/main/js/skins-list.json',
    ).then((response) => response.json()).then((data) => {
      setIsLoading(false);
      setGameListData(data);
    });
  }, []);

  const gameSelectInput = document.getElementById('game-select');
  const typeSelectInput = document.getElementById('type-select');
  const modelSelectInput = document.getElementById('model-select');
  const skinSelectInput = document.getElementById('skin-select');

  function selectGame() {
    setSelectedGame(gameSelectInput.value);
    typeSelectInput.value = 'default';
    setSelectedType(null);
    modelSelectInput.value = 'default';
    setSelectedModel(null);
    skinSelectInput.value = 'default';
  }
  function selectType() {
    setSelectedType(typeSelectInput.value);
    modelSelectInput.value = 'default';
    setSelectedModel(null);
    skinSelectInput.value = 'default';
  }
  function selectModel() {
    setSelectedModel(modelSelectInput.value);
    skinSelectInput.value = 'default';
  }

  const gameList = Object.keys(gameListData);

  let typeList = [];
  let modelList = [];
  let skinList = [];

  if (gameList.includes(selectedGame)) {
    typeList = Object.keys(gameListData[selectedGame].skin_types);
  } else { typeList = []; }

  if (typeList.includes(selectedType)) {
    modelList = Object.keys(gameListData[selectedGame].skin_types[selectedType].entries);
  } else { modelList = []; }

  if (modelList.includes(selectedModel)) {
    skinList = Object.keys(gameListData[selectedGame]
      .skin_types[selectedType].entries[selectedModel].skins);
  } else { skinList = []; }

  if (isLoading) {
    <div>Loading...</div>;
  }

  return (
    <Container>
      <Logo />
      <div className="flex flex-nowrap">
        <VerticalAd1 />
        <div className="flex-shrink flex-grow lg:px-4">
          <section className="text-xs">
            <div className="flex flex-wrap mb-5">
              <div>
                <h3 className="section-title-sm">game</h3>
                <select id="game-select" className="input dark:input" onChange={selectGame}>
                  <option value="null">Game...</option>
                  {gameList.map((game, id) => (
                    <option id={id} key={game} value={game}>{gameListData[game].name}</option>
                  ))}
                </select>
              </div>
            </div>

            <div className="spaced-items-4 flex-wrap items-end mb-5">

              <div>
                <h3 className="section-title-sm">type</h3>
                <select id="type-select" className="input dark:input" onChange={selectType}>
                  <option value="null">Type...</option>
                  {typeList.map((type, id) => (
                    <option id={id} key={type} value={type}>{type}</option>
                  ))}
                </select>
              </div>

              <div>
                <h3 className="section-title-sm">model</h3>
                <select id="model-select" className="input dark:input" onChange={selectModel}>
                  <option value="null">Model...</option>
                  {modelList.map((model, id) => (
                    <option id={id} key={model} value={model}>
                      {gameListData[selectedGame].skin_types[selectedType].entries[model].name}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <h3 className="section-title-sm">variation</h3>
                <select id="skin-select" className="input dark:input">
                  <option value="null">Skin...</option>
                  {skinList.map((skin, id) => (
                    <option id={id} key={skin} value={skin}>
                      {gameListData[selectedGame]
                        .skin_types[selectedType].entries[selectedModel]
                        .skins[skin].name}
                    </option>
                  ))}
                </select>
              </div>
            </div>

          </section>
        </div>

      </div>
    </Container>
  );
}

import React，{useState，useffect}来自“React”；
//只是布局相关的东西
从“../components/layout/Container”导入容器；
从“../components/layout/Logo”导入徽标；
从“../components/modelviewerpage/VerticalD1”导入VerticalD1；
导出默认函数ModelViewerPage（）{
const[isLoading，setIsLoading]=useState（true）；
const[gameListData，setGameListData]=useState（{}）；
常量[SelectedName，SetSelectedName]=useState（空）；
const[selectedType，setSelectedType]=useState（null）；
const[selectedModel，setSelectedModel]=useState（null）；
useffect（（）=>{
取回(
'https://static.teemo.gg/teemo/sites/main/js/skins-list.json',
)。然后（（response）=>response.json（））。然后（（data）=>{
设置加载（假）；
setGameListData（数据）；
});
}, []);
const gameSelectInput=document.getElementById（'game-select'）；
const typeSelectInput=document.getElementById（'type-select'）；
const modelSelectInput=document.getElementById（'model-select'）；
const skinSelectInput=document.getElementById（'skin-select'）；
函数selectGame（）{
SetSelectedName（gameSelectInput.value）；
typeSelectInput.value='default'；
setSelectedType（空）；
modelSelectInput.value='default'；
setSelectedModel（空）；
skinSelectInput.value='default'；
}
函数selectType（）{
设置SelectedType（typeSelectInput.value）；
modelSelectInput.value='default'；
setSelectedModel（空）；
skinSelectInput.value='default'；
}
函数selectModel（）{
setSelectedModel（modelSelectInput.value）；
skinSelectInput.value='default'；
}
const gameList=Object.keys（gameListData）；
让typeList=[]；
让modelList=[]；
让skinList=[]；
如果（游戏列表。包括（SelectedName））{
typeList=Object.keys（gameListData[SelectedName].skin\u类型）；
}else{typeList=[]；}
if（类型列表。包括（选定类型））{
modelList=Object.keys（gameListData[SelectedName]。皮肤类型[selectedType]。条目）；
}else{modelList=[]；}
if（模型列表包括（选定模型））{
skinList=Object.keys（gameListData[SelectedName]
.skin\u types[selectedType]。条目[selectedModel]。皮肤）；
}else{skinList=[]；}
如果（孤岛加载）{
加载。。。；
}
返回(
游戏
游戏
{gameList.map（（游戏，id）=>(
{gameListData[game].name}
))}
类型
键入。。。
{typeList.map（（type，id）=>(
{type}
))}
模型
模型
{modelList.map（（model，id）=>(
{gameListData[SelectedName]。皮肤类型[selectedType]。条目[model]。名称}
))}
变异
皮肤。。。
{skinList.map（（皮肤，id）=>(
{gameListData[SelectedName]
.skin_类型[selectedType]。条目[selectedModel]
.skins[skin].name}
))}
);
}

---

谢谢你的耐心！：）

从头顶上瘦身的方法：

使用一个自定义挂钩或多个自定义挂钩。 您可以将钩子和与之相关的功能移动到此自定义钩子中，最终得到如下结果：

const{gameListData，SelectedName，selectedType，selectedModel，selectGame，selectType，selectModel}=useModelViewer（）；

这需要将所有钩子以及selectGame、selectType和selectModel函数包装到自定义钩子中

将JSX拆分为多个组件。 据我所见，JSX有四个明显独立的元素。您的游戏选择器、类型选择器、模型选择器和皮肤选择器都可以移动到它们自己的小组件中

这不是一个详尽的列表，也不是你唯一的选择，但有几个步骤可以让你开始学习

注意：使用React.useRef（）代替document.getElementById（'game-select'）