React composant clone (sans état ou stateful) pour passer des accessoires supplémentaires

Question

Je veux cloner/étendre un React composant (sans savoir si elle est statefull ou apatride) et le transmettre props:

const Foo = (props) => { 
    return (
    <div>foo</div> 
); 
} 

class Bar extends React.Component { 
    render() { 
    return (
     <div>bar</div> 
    ) 
    } 
} 

Le problème est, ces deux variables Foo et Bar doivent être traités différemment:

const FooExtended = (props, context) => { 
    return Foo(_.extend(props, additionalProps), context); 
} 

class BarExtended extends Bar { 
    constructor(props, context) { 
     super(_.extend(props, additionalProps), context); 
    } 
} 

et il n'y a aucun moyen simple de savoir si une Component variables est Stateless ou Statefull sans faire aki toString tests regex.

React.cloneElement/createElement échoue sur ces me donner l'erreur suivante:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

est donc là un moyen simple que je peux le faire cloneComponent(originalComponent, additionalProps)?

Answer 1

And there is no simple way to know if a variable Component is Stateless or Statefull [...]

Et je pense que c'est l'une des raisons pour lesquelles il était tenu de extend React.Component à un moment donné, pour le rendre plus facile de faire la distinction entre les deux. Parce que React lui-même doit être capable de distinguer entre eux puisque class es ne peuvent pas être instanciés sans new.

Vous pouvez effectuer les opérations suivantes:

function cloneComponent(originalComponent, additionalProps) { 
 
    if (originalComponent.prototype instanceof React.Component) { 
 
    return class extends originalComponent { 
 
     constructor(props, context) { 
 
     super(_.extend(props, additionalProps), context); 
 
     } 
 
    }; 
 
    } 
 
    return (props, context) => { 
 
    return originalComponent(_.extend(props, additionalProps), context); 
 
    }; 
 
}

Parce que Foo.protoype instanceof React.Component est true.

---

Cependant, je pense qu'il est plus courant de faire quelque chose comme ceci:

function addProps(Component, additionalProps) { 
    return props => <Component {...props} {...additionalProps} />; 
} 

Ensuite, il n'y a pas besoin de faire la distinction entre les composants avec et sans état.