如何使用 Reach Router 处理依赖父级的样式答案

【问题标题】：How to work with parent-depended style with Reach Router如何使用 Reach Router 处理依赖父级的样式
【发布时间】：2021-10-17 21:22:35
【问题描述】：

我的应用中有这个结构：

  <Parent style={{display 'flex'}}>
      <Child style={{flex: 1}}></Child>
  </Parent>

我们在我们的应用程序中使用 Reach Router，并用<Router/> 包装了Child 组件。问题在于<Router/> 在父子节点之间渲染另一个 div，并且基本上“阻塞”了 flex 1 属性。

  <Parent style={{display 'flex'}}>
     <Header/>
      <Router>
        <Child style={{flex: 1}}></Child>
      </Router>
     <Footer/>
  </Parent>

我该如何克服这个问题？

【问题讨论】：

标签： javascript css reactjs react-router react-router-dom

【解决方案1】：

只需在Child之外添加一个<div>标签

<Parent>
  <Router>
    <div style={{display 'flex'}}>
      <Child style={{flex: 1}}></Child>
    <div/>
  </Router>
</Parent>

【讨论】：

【解决方案2】：

你可以在这里阅读片段https://reactjs.org/docs/fragments.html#short-syntax

你可以使用标签和>。

【讨论】：

【解决方案3】：

你为什么用这么深的路由器是有原因的吗？

你可以写一些类似的东西：

// Main File
<Router>
    <App />
</Router>

// Your React Component
<Parent style={{display 'flex'}}><Child style={{flex: 1}} /></Parent>

编辑：在检查代码后，对于路由器，它看到它使用了一个默认为“div”的道具，你可以改变它。

let {
  location,
  navigate,
  basepath,
  primary,
  children,
  baseuri,
  component = "div",
  ...domProps
} = this.props;

所以我认为你可以这样做：

const Parent = <Parent style={{display 'flex'}} />;

<Router component={Parent}>
    <Child style={{flex: 1}}></Child>
</Router>

【讨论】：