我试图制作一个带有动态变量的组件,该变量会根据特定路线而变化。我使用 useParams 来提取两个变量,例如 gameName 和 taskNumber。我还设置了状态以使用这两个参数进行快速更改。但是,我没有运气让它工作。我也试过useEffect。我注意到状态保持与初始值相同。 因为每个游戏都有不同的任务,他们有不同的提示,我想使用条件语句来传递这些提示。
目前,路径是/timesup/:gameName/:taskNumber
const FailScreen = () => {
const { gameName, taskNumber } = useParams();
const [prompt, setPrompt] = useState("");
if (gameName === "zoomchat") {
if (taskNumber === 1) {
setPrompt("[mute callers]");
} else {
setPrompt("answers");
}
}
return (
<div>
<PromptBox
title="Time's Up!"
msg={`Oh no! You didn’t find all the ${prompt}`}
/>
<Link to="/">
<Button/>
</Link>
</div>
);
};
理想情况下,我不想对提示进行硬编码。它存在于每个游戏的另一个兄弟组件中。我不确定如何将这些信息提取到这里。我试过 useContext 但也没有用。
答案 0 :(得分:0)
你的组件 new_cols = ["season"].extend(cols)
在我看来完全没问题。您只需将此组件放入具有 FailScreen
路径的 Router
组件中即可。
所以,它应该是这样的:
/timesup/:gameName/:taskNumber