Entonces, en mi componente principal, envío accesorios a un componente secundario como este:
<div className={styles.navBar}> <MasterNavBar color={false} scrollChange={true} /> </div>MasterNavBar obtiene acceso a los accesorios correctamente, pero necesito que MasterNavBar pase esos accesorios a un componente secundario llamado NavBar, que actualmente hago así:
<NavBar props />Sin embargo, cuando hago esto, no se puede acceder a los accesorios en mi archivo de componente NavBar. Por ejemplo, en NavBar, hacer props.color para obtener mi prop de color devuelve indefinido. Entonces, ¿estoy pasando mis accesorios incorrectamente o me estoy perdiendo algo más?
Eso depende de qué accesorios espera NavBar. Si no le importa escribir (ya sea con mecanografiado o reaccionar PropTypes), simplemente puede hacer esto:
<NavBar {...props} />Sin embargo, este no es el mejor enfoque y puede provocar problemas de rendimiento.
Como dijo Antonio Pantano , puede pasar todos los accesorios al <NavBar {...props}/> , pero esta es una mala práctica. Este artículo explica por qué es una mala práctica. Entonces puede pasar los accesorios de MasterNavBar a su hijo de estas dos maneras:
const MasterNavBar = (props) => { /* rest of your code */ return <NavBar color={props.color} scrollChange={props.scrollChange}/> }o
const MasterNavBar = ({color, scrollChange}) => { /* rest of your code */ return <NavBar color={color} scrollChange={scrollChange}/> } Puede cambiar el nombre de NavBar de navegación como desee y puede acceder a ellos en el componente de la NavBar de navegación con estos nombres.