React在侧边栏的内容组件中打开React -bootstrap模式

Question

我想知道从另一个嵌套组件的侧边栏打开react-bootstrap模态的最佳方法是什么?

为了澄清一点，我有一个模态，它在列出项目的组件中呈现，当你单击其中一个项目时，它用于编辑它们。我想做的是，当用户单击侧边栏中的按钮时，它打开该模态以将项目添加到列表(从编辑更改为添加)。

起初我想将模态移动到侧边栏的父级，但问题是我必须传递props 4次才能到达列表，这可能会让稍后编辑此代码的人感到困惑。

接下来，我讲了上下文，并确定它可以工作，但为了使全局状态失去了它的目的。

我教过使用refs，但我不确定如何实现它们。

我教的最后一件事是只是渲染模态作为一个新的组件在侧边栏内，但它不会改变太多，因为我想更新列表一旦用户添加了项目，我将在同一个位置。

我想避免直接访问DOM与id(如果可能的话)，因为我想找到一个"反应方式";

例如(只是为了可视化而不是实际的代码)

<Root>
<Component1>
<Component2>
<SideBar>
<Button onClick={setShowModal(true)}> <!-- click here -->
</SideBar>
</Component2>
<Component3>
<Component4>
<Modal show={showModal}/> <!-- open modal here -->
</Component4>
</Component3>
</Component1>
</Root>

我只是想要一个关于如何处理这个问题的提示，以及最好的方法是什么。

Answer 1

The most "方法是将状态存储在组件上，该组件是按钮和模态的第一个共同祖先。正如您所提到的，这种方法的缺点是，您必须向下传递这个状态。我认为这仍然是一个干净的方法。

在这种情况下，您可以考虑的另一件事是事件发射器。你让Modal监听一个事件来改变它的"打开"状态。状态:

import EventEmitter from 'EventEmitter';
const eventEmitter = new EventEmitter();
export default function Modal() {
const [open, setOpen] = React.useState(false);
const handleToggleModal = () => {
setOpen(!open); 
}
React.useEffect(() => {
eventEmitter.addListener('toggle-modal', handleToggleModal)
return () => {
eventEmitter.removeListener('toggle-modal', handleToggleModal);
}
}, [])
// ...
}

在打开/关闭模态的组件中，你必须发出相应的事件:

eventEmitter.emit('toggle-modal');