将父兄弟姐妹设置为在 reactjs 中可见

Question

我想制作一个弹出窗口 window 并在点击多个项目中的一个之后。我认为最好的解决方案可能是将弹出元素放在 dom 的顶层，而不是将其复制到每个列表项。试图找出一种方法来改变它的状态，并想寻求帮助。也将不胜感激关于如何处理弹出按钮以便为每个列表项提供单独处理程序的建议。

const { useState } = React;

function App() {
    return (
    <div>
      <Container/>
      <Popup />
    </div>
  )
}

function Container() {
    const setPopupVisible = () => {
    console.log('Popup should appear')
  }
    return (
    <ul>
      <li onClick={setPopupVisible}>Item 1</li>
      <li onClick={setPopupVisible}>Item 2</li>
    </ul>
  )
}

function Popup() {
    const [visible, setVisible] = useState(false) 
    return (
    visible ? <div>
      <h3>Popup</h3>
    </div> : ''
  )
}

ReactDOM.render(<App />, document.querySelector("#app"))

Answer 1

您应该使用 React 门户将您的 popup 组件“移动”到 DOM 中的其他位置。

https://reactjs.org/docs/portals.html

Answer 2

一种方法是将 Popup 组件包含在 Container 组件中，如下所示。

function Container() {
    const [isVisible, setIsVisible] = useState(false);

    const setPopupVisible = () => {
    console.log('Popup should appear')
    setIsVisible(true);
  }
    return (
    <ul>
      <li onClick={setPopupVisible}>Item 1</li>
      <li onClick={setPopupVisible}>Item 2</li>
    </ul>
    <Popup visible={isVisible} />
  )
}

和 Popup 组件将如下所示。使用 useEffect 检测 props 变化

function Popup({visible}) {
    const [visible, setVisible] = useState(false);

    useEffect(()=>{
       setVisible(visible);
    }, [visible]);

    return (
    visible ? <div>
      <h3>Popup</h3>
    </div> : ''
  )
}

将父兄弟姐妹设置为在 reactjs 中可见

Setting parent sibling as visible in reactjs

javascript

setstate

reactjs