Mi caso: tengo dos componentes de reacción con un 90% de datos de accesorios idénticos, pero HTML diferente.
No quiero duplicar la declaración de variables en dos archivos.
Así que quiero exportar la parte principal de la destrucción de accesorios a un objeto importable o algo así. ¿Existe alguna manera de hacer esto? ¿O tal vez una forma diferente de hacer esto?
function ProductTotalCount (props) { //common part it's doubled in two files const { className, activeClassName, big, cleared, totalCount, max, min, changedManually, deviceType, cities, updateData } = props // specific props for component const { setSelectedCityDropdownOpen } = props //next part of componentHay dos suposiciones que estoy tomando:
Dado que tiene el 90% de los mismos accesorios, el jsx es el mismo solo para esos accesorios comunes y no para todo el componente. En caso afirmativo, puede crear un componente común solo para accesorios comunes y usarlos en sus otros dos componentes.
Si primero no es el caso, para ser honesto, si realmente desea usar la desestructuración para usar variables, en ese caso, no creo que pueda hacer mucho al respecto, pero sí, puede separar las claves con diferentes nombres del los que son comunes usando:
{ setSelectedCityDropdownOpen, ...rest } = props;
en esto, el descanso contendrá todos sus accesorios comunes, y luego puede usarlos como resto [clave].
Le sugiero que implemente componentes de interfaz de usuario reutilizables y sin estado como un
selected o de value , una propiedad de data u options y una propiedad onSelect en lugar de setSelectedCityDropdownOpen y citiestotalCount por ejemplo)Estos componentes de IU sin estado se pueden usar para cualquier cosa, no solo para ciudades.
Luego envuélvalos en un componente principal (contenedor) que maneja todas las lógicas específicas del caso de uso, como la ciudad seleccionada actualmente, el valor mínimo, máximo, totalCount, etc. y los almacena en su propio estado (su nombre puede ser, por ejemplo, CitySelector que es muy útil). caso específico).
Este padre debe manejar todas las lógicas y pasar los valores almacenados en su estado a los componentes de la interfaz de usuario reutilizables.