¿Cómo reescribir cuando un componente de clase se extiende desde otra clase? Los parámetros en el constructor son lo que me hace dudar sobre cómo manejarlos. ¿Alguien con ideas?
Ejemplo de código.
class Animal extends React.Component { constructor(name, action, addKeywords = [], addHashtag = []) { super(); this.name = name; this.action= action; this.currentUser = new CurrentUser(); this.keywordList = FILTER_BY_KEYWORDS.concat(addKeywords ); this.hashtagList = addHashtag; } nameChange(name) { ... } } class Lion extends Animal { render() { return <Item name={this.nameChange} /> } }Si bien nunca se alentó la herencia en los componentes de clase, a veces no podemos elegir la forma del código heredado que queremos migrar a Hooks. Cada componente antiguo será diferente y no animo a nadie a escribir el siguiente código cuando trabaje en un nuevo proyecto usando React Hooks.
Dicho esto, la siguiente es la "traducción más directa" de esa estructura de clase en particular de la pregunta a un componente de función con ganchos que se me ocurren:
function useAnimal(name, action, addKeywords = [], hashtagList = []) { const self = React.useRef() if (!self.current) { // simulate synchronous constructor method, using the initial prop values self.current = { name, action, currentUser: new CurrentUser(), keywordList: FILTER_BY_KEYWORDS.concat(addKeywords), hashtagList, nameChange: (name) => { ... } } } return self.current } function Lion({name, action, addKeywords, addHashtag}) { const {nameChange} = useAnimal(name, action, addKeywords, addHashtag) return <Item name={nameChange} /> }