通過單擊 React 中的鏈接來渲染組件

Question

我正在故事書中構建一個故事，但這與手頭的問題不太相關。 基本上，我需要建立一個我有一個錨標記的情況，單擊該標記時會打開一個對話框/模態窗口。 對話框是一個組件， <Dialog /> 。 我將其模擬為如下所示：

<a onclick={launches Dialog component}>Click Me</a>

這似乎是一個簡單的問題，我只是不知道答案。 感謝您的幫助！

Answer 1

您將有幾種方法來滿足您的需求。

1. 使用useState和條件渲染

const [open, setOpen] = useState(false)
<a onClick={() => setOpen(true)}>Click Me</a>
{open && <MyComponent />}

2. 使用useState和 css

const [open, setOpen] = useState(false)
<a onClick={() => setOpen(true)}>Click Me</a>
{/* You could use visibility instead of display */}
<MyComponent style={{display: open ? 'block' : 'none'}} />

3. 如果是新窗口，我建議使用一些外部庫，例如react-new-window