1

这可能是一个非常基本的问题。我正在为我的网站制作一个设置页面，我需要一些帮助。

<Route path="/conversations/settings" render={props => <Setting isNew colorMode=
{props.colorMode} toggleColorMode={props.toggleColorMode}/>}/>

所以我最理想的做法是，当您单击设置页面上的按钮时，它会启用/禁用暗模式。在这种情况下它不会。但如果我这样写

<Setting colorMode={props.colorMode} toggleColorMode={props.toggleColorMode}/>

我实际上可以启用/禁用暗模式，但这意味着设置页面呈现在网站的每个页面上，这当然是我不想要的。

4

1 回答 1

0

既然你说这<Setting colorMode={props.colorMode} toggleColorMode={props.toggleColorMode}/>行得通，我会假设无论你在哪里渲染这个Setting组件，它props都在范围内并具有你想要的 prop 值。

如果您想Setting在路线上渲染并传递其他非路线道具，那么您使用render道具这样做是正确的。您现在遇到的问题是您正在访问传递的路由道具而不是props范围内的对象。将路由道具重命名为props外部父组件之外的其他内容，并在Setting需要时将它们传播到您的组件中。

<Route
  path="/conversations/settings"
  render={routeProps => (
    <Setting
      {...routeProps} // <-- history, location, & match
      isNew
      colorMode={props.colorMode}             // <-- you props
      toggleColorMode={props.toggleColorMode} // <-- your props
    />
  )}
/>
于 2022-01-26T03:32:13.377 回答