javascript - 如何为具有不同价值道具的不同路线渲染相同的反应组件？

Question

我想问一下是否可以为不同的路线渲染相同的反应组件但具有不同的价值道具：

我有这样的事情：

   <Switch>
      <Route
         exact
         path="/something1"
         render={props => (
            <SomeComponent
             {...props}
             buttonStyle="#65BDE0"
          />
       )}
    />
    <Route
       exact
       path="/something2"
       render={props => (
          <SomeComponent
           {...props}
           buttonStyle="#FFFFFF"
          />
       )}
    />
     <Route
       exact
       path="/something3"
       render={props => (
          <SomeComponent
           {...props}
           buttonStyle="#000000"
          />
       )}
    />
    </Switch>

如您所见，我有三个具有相同组件的不同路由，但每个路由的 buttonStyle 都不同。有没有办法简化这个或一些更好的方法来处理这个？例如，使用一个 Route 组件？谢谢你。

标签： javascriptreactjs

Answer 1

我怀疑你可以用一个<Route />组件来做到这一点，因为 Route 只能有一个路径。

但是，您可以通过创建一系列路线来使其更简洁。

它可能看起来像这样：

const routesWithProps = [
  {
    path: '/something1',
    props: {
      buttonStyle: '#65BDE0'
    }
  },
  {
    path: '/something2',
    props: {
      buttonStyle: '#FFFFFF'
    }
  },
  {
    path: '/something3',
    props: {
      buttonStyle: '#000000'
    }
  },
];

<Switch>
  {
    routesWithProps.map(route => (
      <Route
         exact
         path={route.path}
         key={route.path}
         render={props => <SomeComponent {...props} {...route.props} />} 
      />
    ))
  }
</Switch>