Esta es probablemente una pregunta muy básica. Estoy creando una página de configuración para mi sitio y necesito ayuda.
<Route path="/conversations/settings" render={props => <Setting isNew colorMode= {props.colorMode} toggleColorMode={props.toggleColorMode}/>}/>Entonces, lo que quiero que esto haga idealmente es cuando haces clic en un botón en la página de configuración, habilita/deshabilita el modo oscuro. En esta situación no lo hace. pero si lo escribo asi
<Setting colorMode={props.colorMode} toggleColorMode={props.toggleColorMode}/>De hecho, puedo habilitar/deshabilitar el modo oscuro, pero esto significa que la página de configuración se muestra en todas las páginas del sitio web, lo que, por supuesto, no quiero.
Dado que dice que <Setting colorMode={props.colorMode} toggleColorMode={props.toggleColorMode}/> funciona, asumiré que donde quiera que esté representando este componente de Setting , los props están dentro del alcance y tienen los valores de accesorios que desea.
Si desea renderizar la Setting en una ruta y pasar otros accesorios que no sean de ruta, entonces tiene razón al usar el accesorio de render para hacerlo. El problema que tiene ahora es que está accediendo a los accesorios de ruta pasados en lugar de a su objeto de props que está dentro del alcance. Cambie el nombre de los accesorios de ruta a algo que no sean los props del componente principal externo y distribúyalos en su componente Setting si los necesita.
<Route path="/conversations/settings" render={routeProps => ( <Setting {...routeProps} // <-- history, location, & match isNew colorMode={props.colorMode} // <-- you props toggleColorMode={props.toggleColorMode} // <-- your props /> )} />