reactjsで親兄弟を要素を表示できるように設定するには？

受付中プログラミング

2024-12-24

hoge

複数の項目のいずれかをクリックした後、ポップアップウィンドウを作成したいと思います。おそらく最善の解決策は、ポップアップ要素を各リストアイテムにコピーするのではなく、domのトップレベルに配置することであると考えました。状態を変える方法を見つけようとしていて、それを行うための助けを求めたいと思います。また、ポップアップボタンを処理して、リストアイテムごとに個別のハンドラーを設定する方法についての提案をいただければ幸いです。


        const { useState } = React;
        
        function App() {
            return (
            
              
              
            
          )
        }
        
        function Container() {
            const setPopupVisible = () => {
            console.log('Popup should appear')
          }
            return (
            
              Item 1
              Item 2
            
          )
        }
        
        function Popup() {
            const [visible, setVisible] = useState(false) 
            return (
            visible ? 
              Popup
             : ''
          )
        }
        
        ReactDOM.render(, document.querySelector("#app"))

回答一覧

popupコンポーネントをDOM内の他の場所に「移動」するには、reactポータルを使用する必要があります。 https://reactjs.org/docs/portals.html

hoge

Popupこれを行う1つの方法は、以下のようにコンポーネントをコンポーネントに含めることContainerです。


        function Container() {
            const [isVisible, setIsVisible] = useState(false);
        
            const setPopupVisible = () => {
            console.log('Popup should appear')
            setIsVisible(true);
          }
            return (
            
              Item 1
              Item 2
            
            
          )
        }

コンポーネントは次のようになりPopupます。useEffect小道具の変更を検出するために使用


        function Popup({visible}) {
            const [visible, setVisible] = useState(false);
        
            useEffect(()=>{
               setVisible(visible);
            }, [visible]);
        
            return (
            visible ? 
              Popup
             : ''
          )
        }

hoge

ログインして回答する