مثال ساده

import React, { useState } from "react"
import ElementPopper from "react-element-popper"

export default function App() {
  const [state, setState] = useState({})

  const updateState = number => setState({ ...state, [number]: !state[number] })

  const Button = ({ number }) => (
    <button onClick={() => updateState(number)}>کلیک کنید</button>
  )

  return (
    <ElementPopper
      position="left"
      element={<Button number={1} />}
      popper={state[1] && (
        <ElementPopper
          position="left"
          element={<Button number={2} />}
          popper={state[2] && (
            <ElementPopper
              position="left"
              element={<Button number={3} />}
              popper={state[3] && <button>آخری</button>}
            />
          )}
        />
      )}
    />
  )
}

لیست های کشویی تو در تو

در این مثال، با استفاده از قابلیتی که در بالا توضیح داده شد ، یک dropdown با منو های تو در تو ایجاد شده است .

فایل سی اس اس:

.dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
  border: 1px solid black;
}

.dropdown li {
  min-width: 120px;
  cursor: pointer;
  padding: 2px 10px;
}

.dropdown li:hover,
.dropdown div.item:hover {
  background: #ddd;
}

.dropdown div.item {
  cursor: pointer;
  height: 26px;
}

کد:

import React, { useState } from "react"
import ElementPopper from "react-element-popper"

export default function App() {
  const [state, setState] = useState({})

  const list = (
    <ul className="dropdown">
      <li>آیتم 1</li>
      <li>آیتم 2</li>
      <li>آیتم 3</li>
      <li>آیتم 4</li>
    </ul>
  )
        
  const mainList = (
    <div className="dropdown">
      {[1, 2, 3, 4].map((number, index) => (
        <div
          key={index}
          className="item"
          onMouseOver={() => setState({ 
            main: true, 
            ["item" + number]: true 
          })}
        >
          <ElementPopper
            containerStyle={{ width: "120px" }}
            element={(
              <>
                <span>آیتم {number}</span>
                <span style={{ float: "left" }}>{">"}</span>
              </>
            )}
            popper={state["item" + number] && list}
            position="left-top"
          />
        </div>
      ))}
    </div>
  )

  return (
    <ElementPopper
      element={(
        <button
          onClick={() => setState({ main: !state.main })}
        >
          کلیک کنید
        </button>
      )}
      popper={state.main && mainList}
      position="bottom-right"
    />
  )
}