Question

我在ReactJS应用程序中创建了一个带有Button和div的组件。我的目标是按下按钮并显示/隐藏div（当前有效）。但是，我将重用该组件，以便拥有多个Button和div。但我总是只希望显示一个div。

如果我按下一个按钮，则隐藏同一组件中的所有div，并从我刚刚按下的按钮显示div，否则，如果我刚刚按下的div是打开的，则将其隐藏。它的工作方式与Bootstrap的下拉按钮相同，但是我不想使用Bootstrap的下拉菜单，因为我想创建自己的自定义按钮。

我将下面的Hide组件导入App.js文件中。它可以通过隐藏或显示div来工作，但是要隐藏除我当前按下的按钮以外的所有其他打开的div（如果尚未打开）。

这是我当前拥有的代码，并且两次使用Mycomp，


function hide () {


        return (
            <div>
                <Mycomp />
                <Mycomp />
            </div>
        );

}


function Mycomp(){
    const[dp, setDp] = useState("none");

    const toggle = () => {
       if (dp === "none"){
        setDp("block")
       }else{
        setDp("none")
       }  
    }

    return(
   <div>
       <button  onClick={toggle}>Test</button>
        <div style={{display: dp}}>{dp}</div>
   </div>

   )
}

export default hide;

Answer 1

您可以通过这种方式更改组件以获得所需的内容。尝试运行此代码以查看结果

function Hide() {
  const [visibleDivIndex, setVisibleDivIndex] = React.useState(0);

  const handleVisibleDiv = id => setVisibleDivIndex(id);

  const divArr = [1, 2, 3]; // just to show haw many component we will use

  return (
    <div>
      {divArr.map((item, index) => (
        <Mycomp
          key={index}
          id={index}
          visibleDivIndex={visibleDivIndex}
          handleVisibleDiv={handleVisibleDiv}
        />
      ))}
    </div>
  );
}

function Mycomp({ id, visibleDivIndex, handleVisibleDiv }) {
  return (
    <div>
      <button onClick={e => handleVisibleDiv(id)}>Test</button>
      <div style={{ display: id === visibleDivIndex ? "block" : "none" }}>
        My Div Content
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Hide />
  </React.StrictMode>,
  rootElement
);

<div id="root"></div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

Answer 2

基本思想是将状态上移到容器中。

function Hide() {

    const defaultDisplay = () => Array.from({length: 2}).fill(false);
    const [displays, setDisplays] = useState(defaultDisplay());

    function onClick(id) {
        const temp = defaultDisplay();
        temp[id] = true;
        setDisplays(temp);
    }

    return (
        <div>
            {
                displays.map((display, i) => {
                    return <Mycomp display={display} id={i} onClick={onClick} />;
                }
            }
        </div>
    );
}

function Mycomp({display, id, onClick}) {
    const[dp, setDp] = useState(display);

    useEffect(() => {
        setDp(display ? 'block' : 'none');
    }, [display]);

    return(
        <div>
            <button onClick={() => onClick(id)}>Test</button>
            <div style={{display: dp}}>{dp}</div>
        </div>
   )
}

export default Hide;

在React.js中隐藏或显示多个Divs

2 个答案: