Question

首先，我正在尝试做的事情有点不对，但与检查和修复所有用例相比，这似乎是一个更简单的解决方案。

项目中的结构类似于（对于这个问题非常简化）：

SomeComponent.jsx：

<div>
  <Modal header={<SomeModalHeader />}>
     content to show in the modal
  </Modal>
</div>

Modal.jsx：

<div>
  <div className="header">
    {header}
  </div>
  <div className="content">
    {children}
  </div>
</div>

SomeModalHeader.jsx：

<div>
  <Link to="/page-1">Link 1</Link>
  <Link to="/page-2">Link 2</Link>
  <Link to="/page-3">Link 3</Link>
</div>

// ...

return connect(...)(SomeModalHeader)

Link组件是从react-router-dom导入的。整个组件由connect的{{1}}增强。

我想要做的是远离react-redux导航，首先向用户显示一条警告消息，告知他们的更改将会丢失，如果他们确认，请关闭模式并继续导航。我不能依赖于位置更改，因为Modal可能指向同一页面，因为打开模式不会更改浏览器的URL。我计划通过在Link内为已传递的onClick组件内的所有Modal组件添加Link处理程序来执行此操作。与常规DOM API相当的是（使用jQuery，为了简化此示例）：header。但我完全清楚这不应该在React中完成，所以我正在寻找“React方式”。

问题是有多个不同的$(header).find('.link').click(handlerFn)组件，未来可能会有更多组件，所以我希望这是一个更通用的解决方案，而不是修改每个标头组件。< / p>

另一个问题是我没有找到一种方法来获取header的子组件，因为header将它包装到它自己的组件中然后我无法获得对包装的引用零件。我尝试将{withRef: true}传递给connect函数，但我仍未在connect组件上找到getWrappedInstance。

有没有办法在不添加对模态标题组件的更改的情况下完成此操作？

Traverse传递了React元素并为深层嵌套的子

0 个答案: