在js中使用useStates反应如何一次显示一个div

Posted 2023-03-15

【中文标题】在js中使用useStates反应如何一次显示一个div

【英文标题】：using useStates in js react how to display one div at a time

【发布时间】：2021-11-26 09:17:47

【问题描述】：

我有 3 个 div 和 3 个通过样式组件创建的按钮是 react js，我想知道如何在页面加载时默认显示一个 div，以及当用户单击其他两个按钮时我想要那个 div使用 useStates 显示和其他 div 消失。

这就是我想创建useState和一个参数为“displayDiv”的函数 并且可能通过单击其中一个按钮将选定的 div 作为参数传递，但我不知道该怎么做。

const Maincontainer = styled.div`
    border: 1px solid black;
`
const Divbtncontainer = styled.div`
    border: 1px solid black;
    display: flex;
    justify-content: center;
`
const Div1btn = styled.button`
    border-radius: 20px;
    margin-right: 10px;
    background: #D3D3D3;
    width: 15%;
    cursor: pointer;
    &:hover
        background: #1B1212;
        color: cyan;
        transition: ease-in-out 0.3s;
    
`
const Div2btn = styled.button`
    border-radius: 20px;
    margin-right: 10px;
    background: #D3D3D3;
    width: 15%;
    cursor: pointer;
    &:hover
        background: #1B1212;
        color: cyan;
        transition: ease-in-out 0.3s;
    
`
const Div3btn = styled.button`
    border-radius: 20px;
    margin-right: 10px;
    background: #D3D3D3;
    width: 15%;
    cursor: pointer;
    &:hover
        background: #1B1212;
        color: cyan;
        transition: ease-in-out 0.3s;
    
`
const Divscontainer = styled.div`
    display: flex;
    justify-content: center;

`
const Div1 = styled.div`
    text-align: center;
    border: 1px solid black;
`
const Div2 = styled.div`
    text-align: center;
    border: 1px solid black;
`
const Div3 = styled.div`
    text-align: center;
    border: 1px solid black;
`


    function App() 
     const [visableDiv, setVisableDiv] = useState();   
            function setDivToVisable(displayDiv)
                setVisableDiv(displayDiv)
            
                  <Maincontainer>
                    <Divbtncontainer>
                        <Div1btn>
                            Div 1
                        </Div1btn>
                        <Div2btn>
                            Div 2
                        </Div2btn>
                        <Div3btn>
                            Div 3
                        </Div3btn>
                    </Divbtncontainer>
                    <Divscontainer>
                        <Div1>
                            <h2>This is div 1 </h2>
                        </Div1>
                        <Div2>
                            <h2>This is div 2 </h2>
                        </Div2>
                        <Div3>
                            <h2>This is div 3 </h2>
                        </Div3>
                    </Divscontainer>
                </Maincontainer>
    
    

【问题讨论】：

您是否尝试过对所选 div 进行条件渲染？您能否为您尝试过的内容提供更完整/全面的代码示例？

以下是正确执行此操作的方法，无需重复代码：codesandbox.io/s/elastic-microservice-dqtdw?file=/src/App.js

【参考方案1】：

您可以使用条件渲染进行管理。

 function App() 
  const [visableDiv, setVisableDiv] = useState("Div 1");

  const setDivToVisable = (displayDiv) => 
    setVisableDiv(displayDiv);
  ;

  <Maincontainer>
    <Divbtncontainer>
      <Div1btn onClick=() => setDivToVisable('Div 1')>Div 1</Div1btn>
      <Div2btn onClick=() => setDivToVisable('Div 2')>Div 2</Div2btn>
      <Div3btn onClick=() => setDivToVisable('Div 3')>Div 3</Div3btn>
    </Divbtncontainer>
    <Divscontainer>
      visableDiv === "Div 1" && (
        <Div1>
          <h2>This is div 1 </h2>
        </Div1>
      )
      visableDiv === "Div 2" && (
        <Div2>
          <h2>This is Div 2 </h2>
        </Div2>
      )
      visableDiv === "Div 3" && (
        <Div3>
          <h2>This is div 3 </h2>
        </Div3>
      )
    </Divscontainer>
  </Maincontainer>;

【讨论】：

这个方案不遵循DRY原则； OP 有很多重复的代码应该被消除。添加第四个 div 需要复制粘贴一个部分，这也是不好的做法。

同意，很多代码是重复的，需要重构你在评论中提到的击球方式codesandbox.io/s/elastic-microservice-dqtdw?file=/src/App.js

【参考方案2】：

没有重复代码，您可以添加任意数量的 div：

import useState  from 'react'
const divs = [
  <div>
      <h2>This is div 1 </h2>
  </div>,
  <div>
      <h2>This is div 2 </h2>
  </div>,
  <div>
      <h2>This is div 3 </h2>
  </div>,
];
export const App= () => 
  const [visibleDivIndex, setVisibleDivIndex] = useState(0);

  return (
      <div>
          <div id="container">
              divs.map((_, index) => (
                  <button onClick=() => setVisibleDivIndex(index)>
                      Div index + 1
                  </button>
              ))
          </div>
          <div>divs[visibleDivIndex]</div>
      </div>
  );
;

【参考方案3】：

您可以将 div 放入数组中，在选定的索引处渲染 div（默认为 0），然后在单击按钮时更改索引。

const elements = [
    <Div1>
        <h2>This is div 1 </h2>
    </Div1>,
    <Div2>
        <h2>This is div 2 </h2>
    </Div2>,
    <Div3>
        <h2>This is div 3 </h2>
    </Div3>,
];

function App() 
    const [index, setIndex] = useState(0);

    function clickHandler(index) 
        return () => setIndex(index);
    

    return (
        <Maincontainer>
            <Divbtncontainer>
                <Div1btn onClick=clickHandler(0)>
                    Div 1
                </Div1btn>
                <Div2btn onClick=clickHandler(1)>
                    Div 2
                </Div2btn>
                <Div3btn onClick=clickHandler(2)>
                    Div 3
                </Div3btn>
            </Divbtncontainer>
            <Divscontainer>
                elements[index]
            </Divscontainer>
        </Maincontainer>
    );

有更好和更可扩展的方法来做这种事情，但它们不太适合您的示例，因为您在每个位置都使用独特的组件。我不确定为什么 Div2btn、Div3Btn、Div2 和 Div3 与 Div1btn 和 Div1 相同时存在。