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

Question

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

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

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

接下来，我讲授了上下文，并确定这可行，但仅仅为此创建一个全局状态就失去了它的目的。

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

我教的最后一件事是将模式呈现为侧边栏内的一个新组件，但它不会有太大变化，因为我想在用户添加项目后更新列表，我会在同一个位置。

而且我想避免使用 id 直接访问 DOM(如果可能的话)，因为我想找到一种“ react 方式”来做到这一点。

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

<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

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

对于这种情况，您可以考虑的另一件事是 event emitter .您让 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');