Necesito tener un componente para manejar la configuración, este componente (llamado Settings ) almacena el estado usando useState() , por ejemplo, el color primario.
Necesito crear una única instancia de este componente y ponerla a disposición de todos los componentes de la aplicación. Afortunadamente, ya transmití un dictado de estado a cada componente (no estoy muy seguro de si esta es la forma correcta de lograrlo), por lo que solo puedo incluir esta constante de Configuración.
Mi problema es que no sé cómo crear el componente para este propósito, para poder llamar a sus funciones y pasarlo a los niños.
Así es más o menos cómo se ve mi componente Configuración:
const Settings = (props) => { const [primaryColor, setPrimaryColor] = useState("") const getColorTheme = (): string => { return primaryColor } const setColorTheme = (color: string): void => { setPrimaryColor(color) } return null } export default SettingsEntonces me gustaría poder hacer algo como esto en otro lugar de la aplicación:
const App = () => { const settings = <Settings /> return ( <div style={{ color: settings.getColorTheme() }}></div> ) }Tenga en cuenta que soy completamente nuevo para reaccionar, por lo que mi enfoque probablemente sea completamente incorrecto.
Puede usar un componente de orden superior (HOC) personalizado para este propósito, que es más fácil que crear un contexto (aunque el contexto también es un HOC). Un HOC toma un componente y devuelve un nuevo componente. Puede enviar cualquier dato desde su HOC al componente recibido.
const withSettings = (Component) => { const [settings, setSettings] = useState({}) // ... // ... <Component {...props} settings={settings}/> );Y puedes usarlo así:
const Component = ({ settings }) => { ...your settings UI } export default SettingsUI = withSettings(Component);Puede leer más sobre los HOC en la documentación oficial de reacción .