通过在 React 中单击 link 来渲染组件

Question

我正在故事书中构建一个故事，但这与手头的问题不太相关。基本上，我需要建立一个我有一个锚标记的情况，单击该标记会打开一个对话框 box/modal window。该对话框是一个组件，<Dialog />。我把它模仿成这样的东西：

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

这似乎是一个简单的问题，我就是不知道答案。感谢您的帮助！

Answer 1

您可以通过多种方式来满足您的需求。

使用useState和条件渲染

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

使用 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'}} />

如果是新的 window，我建议使用一些外部库，例如 react-new-window

通过在 React 中单击 link 来渲染组件

Render a component by clicking a link in React

javascript

reactjs