Question

所以我有多个组件和一个按钮列表。当我按下按钮时，我想使用reacthooks在{displayComponent}中显示相应的组件。我只希望一次显示一个组件（因此，如果您按下另一个按钮，它将替换以前的内容）。

有人可以告诉我我哪里出问题了吗？这是行不通的（它只是显示所有三个组件，可见性没有改变）。我的想法是根据displayComponent是否与它的ID相匹配来显示组件。

我该如何解决？有没有更有效的方法来实现这一目标？

      import Component1 from "./components/comp1";
      import Component2 from "./components/comp2";
      import Component3 from "./components/comp3";


  function ComponentSelection() {


    let [displayComponent, setDisplayComponent] = useState(null);


return(
        <Button onClick={setDisplayComponent = "comp1">Click to display component 1</Button>
        <Button onClick={setDisplayComponent = "comp2"}>Click to display component 2</Button>
        <Button onClick={setDisplayComponent = "comp3"}>Click to display component 3</Button>

        {displayComponent}

        <Component1 id='comp1' display={displayComponent === 'comp1'} />
        <Component2 id='comp2' display={displayComponent === 'comp2'} />
        <Component3 id='comp3' display={displayComponent === 'comp3'} />
)
}

export default ComponentSelection

Answer 1

您误解了钩子。返回数组中的第二个元素是用于对其进行设置的函数。尝试以下方法：

<Button onClick={() => setDisplayComponent("comp1")}>Click to display component 1</Button>

需要使用react挂钩来显示基于按钮的组件

1 个答案: