Les fonctions ne sont pas valides en tant qu’enfant de React. Cela peut arriver si vous retournez un composant au lieu de à partir de render

Question

J'ai écrit un Ordre Plus élevé de la Composante:

import React from 'react';


const NewHOC = (PassedComponent) => {
    return class extends React.Component {
        render(){
            return (
                <div>
                    <PassedComponent {...this.props}/>
                </div>
            )
        }
    }
}

export default NewHOC;

Je suis l'aide de la ci-dessus dans mon 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>
   );
  }
 }

Mais, l'avertissement que je reçois est:

Avertissement: les Fonctions ne sont pas valides comme Réagir enfant. Cela peut se produire si vous revenez d'un Composant au lieu de < / Composante> à partir de rendu. Ou peut-être vous appelez cette fonction plutôt que de le retourner. dans NewHOC (créée par App) dans div (créée par App) dans l'App

L'Movie.js fichier est:

import React from "react";

export default class Movie extends React.Component{
    render() {
        return <div>
            Hello from Movie {this.props.name}
            {this.props.children}</div>
    }
}

Ce que je fais mal?

Answer 1

Vous l'utilisez comme un élément régulier, mais sa fait une fonction qui retourne un composant.

Essayez de faire quelque chose comme ceci:

const NewComponent = NewHOC(Movie)

Et vous allez l'utiliser comme ceci:

<NewComponent someProp="someValue" />

Voici un exemple:

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"/>

Donc, fondamentalement, NewHOC est juste une fonction qui accepte un composant et renvoie un nouveau composant qui rend le composant passée. Nous avons l'habitude d'utiliser ce modèle pour améliorer les composants et de les partager de la logique ou des données.

Vous pouvez lire à ce sujet HOCS dans les docs et je recommande aussi la lecture à propos de la différence entre réagir éléments et composants

Answer 2

Dans mon cas, j'ai oublié d'ajouter le () après le nom de la fonction dans la fonction de rendu d'un composant de réaction

 public render() {
       let ctrl = (
           <>
                <div className="aaa">
                    {this.renderView}
                </div>
            </>
       ); 

       return ctrl;
    };


    private renderView() : JSX.Element {
        // some html
    };
 

Changer la méthode de rendu, comme indiqué dans le message d'erreur à

         <div className="aaa">
            {this.renderView()}
        </div>
 

résolu le problème

Answer 3

L'ajout de sagiv réponse, nous devrions créer le composant parent d'une façon telle qu'il peut s'agir de tous les enfants des composants plutôt que le retour de l'enfant composants dans la façon dont vous étiez en train de revenir.

Essayez de intentiate le composant parent et transmettre les accessoires à l'intérieur de sorte que tous les enfants peuvent l'utiliser comme ci-dessous

const NewComponent = NewHOC(Movie);

Ici NewHOC est le composant parent et tous ses enfants vont utiliser le film comme accessoires.

Mais de toute façon, vous guyd6 avoir résolu un problème pour les nouveaux réagir aux développeurs, car cela pourrait être un problème qui peut venir aussi et c'est là où ils peuvent trouver la solution pour que.

Answer 4

Dans mon cas, j’étais un composant de la classe transport de parent et l’utilisais à l’intérieur en tant que var prop, en utilisant typescript et Formik, et je fonctionnais bien ainsi:

Parent 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>
  }
}
 

Parent 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>
        )
      }}
    />
    )
  }
}