Question

我对React有些新意。所以请耐心等待我。我有以下基本结构：

<App>
 this.props.children
</App>

...在儿童中，一个组件是一个标题，它具有我想要的可选搜索组件：

<Header>
  ...some other children...
  <Search /> <- STUCK HERE SHOULD BE OPTIONAL!!!
</Header>
 ...children from other components...

我想要做的是说当我去路线A时，不应该包括搜索组件（或者至少不显示），但是当我去路线B时，它应该。我已经洗了几天，到目前为止还找不到满足这种需求的解决方案。如果重要，我使用ES6 / 7（babel通过webpack）。

我可以在APP中设置状态并按字面意思调整以调整搜索上传递的道具并显示或不显示它，但无法根据路线动态地弄清楚如何做到这一点。

核心问题是如何告诉App（和间接Header）在某些路由上的Header内部显示搜索组件，而不是在其他路由上。我想'也许我需要中间的某种抽象/包装组件，但我不太确定。欢迎任何或想法。

TIA！

Answer 1

首先设置您的路线。

<Router path="/" component={App}>
  <Route path="foo" component={Header} showSearch={true} />
  <Route path="bar" component={Header} showSearch={false} />
</Router>

路由将作为属性传递，然后您可以访问showSearch属性，该属性确定是否呈现搜索组件。

// Header
render() {
  const { showSearch } = this.props.route;

  return (
    <div className='header'>
      // ... other components
      { showSearch ? <Search /> : null }
    </div>
  );
}

也许你不希望你的标题成为顶级组件。在这种情况下，定义一个中间包装器组件，将组件路由向下转发到标头。

<Router path="/" component={App}>
  <Route path="foo" component={Shell} showSearch={true} />
  <Route path="bar" component={Shell} showSearch={false} />
</Router>

// Shell
render() {
  const { route } = this.props;
  return (
    <div className='shell'>
      <Header {...route} />
    </div>
  );
}

或者，您可以从Header组件内部进行快速而肮脏的检查。

// Header
render() {
  const { hash } = window.location,
        showSearch = /\/foo/.test(hash);

  return (
    <div className='header'>
      // ... other components
      { showSearch ? <Search /> : null }
    </div>
  );
}

Answer 2

如果您想使用函数式组件，React Router 为此专门为此创建了一个名为 render 的 API。

示例：

<Route
  path='/search'
  render={(props) => (
    <Header {...props} showSearch={true} />
  )}
/>

然后只需在您的组件中照常使用道具：

interface HeaderProps {
  showSearch: boolean
}

export const Header: React.FC<HeaderProps> = ({ showSearch }) => {
  return (
    <React.Fragment>
      { showSearch ? <Search /> : null }
    </React.Fragment>
  )
}

请参阅 Tyler McGinnis 撰写的关于此实现的优秀文章： https://ui.dev/react-router-v4-pass-props-to-components/

使用反应路由器在路由上设置状态/道具

2 个答案: