reactjs - pure - render component react js

Las funciones no son válidas como un niño React. Esto puede suceder si devuelve un componente en lugar de hacerlo desde el render

Question

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 estoy recibiendo es:

Advertencia: Las funciones no son válidas como un niño React. Esto puede suceder si devuelve un componente en lugar de hacerlo desde el 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?

Answer 1

Agregando a la respuesta de sagiv, deberíamos crear el componente primario de tal manera que pueda consistir en todos los componentes secundarios en lugar de devolver los componentes secundarios en la forma en que intentaba regresar.

Trate de intentar el componente principal y pase los accesorios dentro para que todos los niños puedan usarlo como se muestra a continuación.

const NewComponent = NewHOC(Movie);

Aquí NewHOC es el componente principal y todos sus secundarios usarán la película como accesorios.

Pero de cualquier manera, guyd6 ha resuelto un problema para los nuevos desarrolladores de reacción, ya que este podría ser un problema que también puede surgir y aquí es donde pueden encontrar la solución para eso.

Answer 2

En mi caso, era un componente de clase de transporte desde el padre y lo uso en su interior como prop var, usando mecanografiado y Formik, y funciono bien así:

Padre 1

import Parent2 from ''./../components/Parent2/parent2''
import Parent3 from ''./../components/Parent3/parent3''
export default class Parent1 extends React.Component {
render(){
<React.Fragment>
<Parent2 componentToFormik={Parent3} />
</React.Fragment>
}
}

Padre 2

export default Parent2 extends React.Component{
render(){
const { componentToFormik } = this.props
return(
<Formik
render={(formikProps) => {
return(
<React.fragment>
{(new componentToFormik(formikProps)).render()}
</React.fragment>
)
}}
/>
)
}
}

Answer 3

Lo está utilizando como un componente regular, 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 de 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"/>

Así que, básicamente, NewHOC es solo una función que acepta un componente y devuelve un nuevo componente que procesa el componente que se pasa. Por lo general, utilizamos este patrón para mejorar los componentes y compartir la lógica o los datos.

Puede leer sobre HOCS en los docs y también recomiendo leer sobre la diferencia entre elementos y componentes de reacción