He escrito un componente de orden superior:
import React from 'react'; const NewHOC = (PassedComponent) => { return class extends React.Component { render(){ return ( <div> <PassedComponent {...this.props}/> </div> ) } } } export default NewHOC;Estoy usando lo anterior en mi App.js:
import React from 'react'; import Movie from './movie/Movie'; import MyHOC from './hoc/MyHOC'; import NewHOC from './hoc/NewHOC'; export default class App extends React.Component { render() { return ( <div> Hello From React!! <NewHOC> <Movie name="Blade Runner"></Movie> </NewHOC> </div> ); } }Pero, la advertencia que recibo es:
Advertencia: las funciones no son válidas como hijo de React. Esto puede suceder si devuelve un Componente en lugar de <Component /> desde render. O tal vez quisiste llamar a esta función en lugar de devolverla. en NewHOC (creado por la aplicación) en div (creado por la aplicación) en la aplicación
El archivo Movie.js es:
import React from "react"; export default class Movie extends React.Component{ render() { return <div> Hello from Movie {this.props.name} {this.props.children}</div> } }¿Qué estoy haciendo mal?
Lo está utilizando como un componente normal, pero en realidad es una función que devuelve un componente.
Intenta hacer algo como esto:
const NewComponent = NewHOC(Movie)Y lo usarás así:
<NewComponent someProp="someValue" />Aquí hay un ejemplo en ejecución:
const NewHOC = (PassedComponent) => { return class extends React.Component { render() { return ( <div> <PassedComponent {...this.props} /> </div> ) } } } const Movie = ({name}) => <div>{name}</div> const NewComponent = NewHOC(Movie); function App() { return ( <div> <NewComponent name="Kill Bill" /> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"/> Entonces, básicamente NewHOC es solo una función que acepta un componente y devuelve un nuevo componente que representa el componente pasado. Usualmente usamos este patrón para mejorar los componentes y compartir lógica o datos.
Puede leer sobre HOCS en los documentos y también recomiendo leer sobre la diferencia entre elementos y componentes de reacción.
Escribí un artículo sobre las diferentes formas y patrones de compartir la lógica en reaccionar.
También encontré este error porque no usé el snytax correcto en el enrutamiento. Esto estaba en mi App.js en la sección <Routes> :
Falso:
<Route path="/movies/list" exact element={ MoviesList } />Correcto:
<Route path="/movies/list" exact element={ <MoviesList/> } />Así que ahora MoviesList se reconoce como un componente.
En mi caso, olvidé agregar el () después del nombre de la función dentro de la función de procesamiento de un componente de reacción
public render() { let ctrl = ( <> <div className="aaa"> {this.renderView} </div> </> ); return ctrl; }; private renderView() : JSX.Element { // some html };Cambiar el método de renderizado, como se indica en el mensaje de error a
<div className="aaa"> {this.renderView()} </div>arregló el problema