React.js 道具问题

Question

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

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

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

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

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

Answer 1

既然你说<Setting colorMode={props.colorMode} toggleColorMode={props.toggleColorMode}/>有效，我假设无论你在哪里渲染这个Setting组件， props都在 scope 中并且具有你想要的道具值。

如果您想在路由上渲染Setting并传递其他非路由道具，那么使用render道具这样做是正确的。 您现在遇到的问题是您正在访问传递的路线道具，而不是 scope 中的props object。 将路由 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
    />
  )}
/>