Tengo un componente que actualmente está tomando el valor de un objeto como accesorio que se está extendiendo.
const primaryProps = {/* about 10 key/values in here */} <Component {...primaryProps} /> Esto funciona según lo previsto. Pero ahora intento agregarle un OR y agregar otro objeto que se propaga. Pero esto está arrojando errores de sintaxis. ¿Hay alguna forma de evitarlo? Gracias.
Intenté seguir lo que no funciona.
const primaryProps = {/* about 10 key/values in here. Can also be empty/null */} const secondaryProps = {/* about 10 key/values in here */} <Component {...primaryProps || ...secondaryProps} /> <Component `${primaryProps.join(",") || secondaryProps.join(",")}` />Si desea pasar las propiedades secondaryProps solo cuando las primaryProps son null o no están undefined , puede hacerlo así (pero tenga en cuenta que esto no funcionará si el objeto pasado está definido pero vacío):
<Component {...(primaryProps ?? secondaryProps)} />No creo que esto sea posible de hacer dentro de los accesorios de un componente. Además no está limpio. Lo que sugeriría es eliminar la condición del componente.
const props = condition ? primaryProps : secondaryProps <Component {...props} />Tu intento:
<Component {...primaryProps || ...secondaryProps} /> No funcionará porque no es necesario difundir los elementos secondaryProps .
Si primaryProps es NULL, se utilizarán los secondaryProps con la primera sintaxis extendida.
Así que elimine el segundo ... y use:
<Component { ...primaryProps || secondaryProps } />; Pequeño ejemplo, alterna primary para verlo en acción
class Child extends React.Component { render() { return Object.values(this.props); } } class Example extends React.Component { render() { // const primary = { foo: 'primary' }; const primary = null; const secondary = { bar: 'secondary' }; return <Child { ...primary || secondary } />; } } ReactDOM.render(<Example />, document.body); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>