Wie kann ich diese Klassenbasiskomponente höherer Ordnung in eine Funktionskomponente umwandeln?

Question 1

Ich habe in meiner folgenden Reaktions-App bereits ein HOC erstellt Das, und es funktioniert gut. Allerdings habe ich mich gefragt, ob es eine Möglichkeit gibt, ein HOC als Funktionskomponente (mit oder ohne Status) zu erstellen? da es sich bei dem gegebenen Beispiel um eine klassenbasierte Komponente handelt.

Habe versucht, das Gleiche über das Internet zu finden, konnte aber nichts finden. Ich bin mir nicht sicher, ob das überhaupt möglich ist?? Oder das Richtige überhaupt??

Jeder Hinweis wird geschätzt 🙂

Question 2

Ich stimme Siraj zu, streng genommen ist das Beispiel in der akzeptierten Antwort kein echter HOC. Das Unterscheidungsmerkmal eines HOC ist, dass es gibt eine Komponente zurückwährend die PrivateRoute Komponente in der akzeptierten Antwort Ist eine Komponente selbst. Obwohl es also ganz gut erreicht, was es sich vorgenommen hat, halte ich es nicht für ein großartiges Beispiel für ein HOC.

In der Welt der funktionalen Komponenten würde das einfachste HOC so aussehen:

const withNothing = Component => ({ ...props }) => (
  <Component {...props} />
);

Berufung withNothing gibt eine andere Komponente zurück (keine Instanz, das ist der Hauptunterschied), die dann wie eine reguläre Komponente verwendet werden kann:

const ComponentWithNothing = withNothing(Component);
const instance = <ComponentWithNothing someProp="test" />;

Eine Möglichkeit, dies zu nutzen, besteht darin, Ad-hoc zu verwenden (kein Wortspiel beabsichtigt). Lol) Kontextanbieter.

Nehmen wir an, meine Anwendung verfügt über mehrere Punkte, an denen sich ein Benutzer anmelden kann. Ich möchte die Anmeldelogik (API-Aufrufe und Erfolgs-/Fehlermeldungen) nicht über alle diese Punkte hinweg kopieren, daher hätte ich gerne eine wiederverwendbare <Login /> Komponente. Allerdings unterscheiden sich in meinem Fall alle diese Anmeldepunkte optisch deutlich, sodass eine wiederverwendbare Komponente keine Option ist. Was ich brauche, ist ein wiederverwendbares <WithLogin /> Komponente, die ihren untergeordneten Elementen alle notwendigen Funktionen zur Verfügung stellen würde – den API-Aufruf und Erfolgs-/Fehlermeldungen. Hier ist eine Möglichkeit, dies zu tun:

// This context will only hold the `login` method.
// Calling this method will invoke all the required logic.
const LoginContext = React.createContext();
LoginContext.displayName = "Login";

// This "HOC" (not a true HOC yet) should take care of
// all the reusable logic - API calls and messages.
// This will allow me to pass different layouts as children.
const WithLogin = ({ children }) => {
  const [popup, setPopup] = useState(null);

  const doLogin = useCallback(
    (email, password) =>
      callLoginAPI(email, password).then(
        () => {
          setPopup({
            message: "Success"
          });
        },
        () => {
          setPopup({
            error: true,
            message: "Failure"
          });
        }
      ),
    [setPopup]
  );

  return (
    <LoginContext.Provider value={doLogin}>
      {children}

      {popup ? (
        <Modal
          error={popup.error}
          message={popup.message}
          onClose={() => setPopup(null)}
        />
      ) : null}
    </LoginContext.Provider>
  );
};

// This is my main component. It is very neat and simple
// because all the technical bits are inside WithLogin.
const MyComponent = () => {
  const login = useContext(LoginContext);

  const doLogin = useCallback(() => {
    login("[email protected]", "password");
  }, [login]);

  return (
    <WithLogin>
      <button type="button" onClick={doLogin}>
        Login!
      </button>
    </WithLogin>
  );
};

Leider funktioniert das nicht, weil LoginContext.Provider wird instanziiert innen MyComponentund so useContext(LoginContext) gibt nichts zurück.

HOC zur Rettung! Was wäre, wenn ich einen kleinen Mittelsmann hinzufügen würde:

const withLogin = Component => ({ ...props }) => (
  <WithLogin>
    <Component {...props} />
  </WithLogin>
);

Und dann:

const MyComponent = () => {
  const login = useContext(LoginContext);

  const doLogin = useCallback(() => {
    login("[email protected]", "password");
  }, [login]);

  return (
    <button type="button" onClick={doLogin}>
      Login!
    </button>
  );
};

const MyComponentWithLogin = withLogin(MyComponent);

Bumm! MyComponentWithLogin wird jetzt wie erwartet funktionieren.

Das ist vielleicht nicht die beste Herangehensweise an diese besondere Situation, aber ich mag es irgendwie.

Und ja, es ist wirklich nur ein zusätzlicher Funktionsaufruf, mehr nicht! Laut offiziellem Leitfaden:

HOCs sind per se nicht Teil der React-API. Sie sind ein Muster, das sich aus der kompositorischen Natur von React ergibt.

Question 3

Auf jeden Fall können Sie eine funktionale zustandslose Komponente erstellen, die beispielsweise eine Komponente als Eingabe akzeptiert und eine andere Komponente als Ausgabe zurückgibt.

Sie können eine PrivateRoute-Komponente erstellen, die eine Komponente als Requisitenwert akzeptiert und eine andere Komponente zurückgibt, je nachdem, ob der Benutzer authentifiziert ist oder nicht.

Wenn der Benutzer nicht authentifiziert ist (lesen Sie ihn aus dem Kontextspeicher), leiten Sie den Benutzer mit zur Anmeldeseite weiter <Redirect to='/login'/>Andernfalls geben Sie die als Requisite übergebene Komponente zurück und senden andere Requisiten an diese Komponente <Component {...props} />

App.js

const App = () => {
  return (
      <Switch>
        <PrivateRoute exact path="https://stackoverflow.com/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
      </Switch>
  );
}

export default App;

PrivateRoute.jsx

import React, { useContext , useEffect} from 'react';
import { Route, Redirect } from 'react-router-dom'
import AuthContext from '../../context/auth/authContext'

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authContext = useContext(AuthContext)
  const { loadUser, isAuthenticated } = authContext
  useEffect(() => {
    loadUser()
    // eslint-disable-next-line
  }, [])
  if(isAuthenticated === null){
    return <></>
  }
  return (
    <Route {...rest} render={props =>
      !isAuthenticated ? (
        <Redirect to='/login'/>
      ) : (
        <Component {...props} />
      )
    }
    />
  );
};
export default PrivateRoute;

Komponenten höherer Ordnung müssen keine Klassenkomponenten sein. Ihr Zweck besteht darin, eine Komponente als Eingabe zu verwenden und gemäß einer bestimmten Logik eine Komponente als Ausgabe zurückzugeben.

Question 4

Das Folgende ist ein stark vereinfachtes Beispiel für die Verwendung von HOC mit Funktionskomponenten.

Die zu „verpackende“ Funktionskomponente:

import React from 'react'
import withClasses from '../withClasses'

const ToBeWrappedByHOC = () => {
return (
    <div>
        <p>I'm wrapped by a higher order component</p>
    </div>
       )
}

export default withClasses(ToBeWrappedByHOC, "myClassName");

Die Komponente höherer Ordnung:

import React from 'react'


const withClasses = (WrappedComponent, classes) => {
return (props) => (
    <div className={classes}>
        <WrappedComponent {...props} />
    </div>
       );
};

export default withClasses;

Die Komponente kann auf diese Weise in einer anderen Komponente verwendet werden.

<ToBeWrappedByHOC/>

Question 5

Ich komme vielleicht zu spät zur Party, aber hier ist mein Kommentar zum HOC

Das Erstellen von HOC im Sinne einer echten Reaktionsfunktionskomponente ist nahezu unmöglich, da empfohlen wird, Hook nicht innerhalb einer verschachtelten Funktion aufzurufen.

Rufen Sie Hooks nicht innerhalb von Schleifen, Bedingungen oder verschachtelten Funktionen auf. Verwenden Sie stattdessen immer Hooks auf der obersten Ebene Ihrer React-Funktion, bevor Sie vorzeitig zurückkehren. Indem Sie diese Regel befolgen, stellen Sie sicher, dass Hooks bei jedem Rendern einer Komponente in derselben Reihenfolge aufgerufen werden. Dadurch kann React den Status von Hooks zwischen mehreren useState- und useEffect-Aufrufen korrekt beibehalten. (Wenn Sie neugierig sind, erklären wir Ihnen dies im Folgenden ausführlich.)

Regeln für Hooks

Hier ist, was ich versucht habe und gescheitert bin

import React, { useState } from "react";

import "./styles.css";

function Component(props) {
  console.log(props);
  return (
    <div>
      <h2> Component Count {props.count}</h2>
      <button onClick={props.handleClick}>Click</button>
    </div>
  );
}

function Component1(props) {
  console.log(props);
  return (
    <div>
      <h2> Component1 Count {props.count}</h2>
      <button onClick={props.handleClick}>Click</button>
    </div>
  );
}

function HOC(WrapperFunction) {
  return function (props) {
    const handleClick = () => {
      setCount(count + 1);
    };

    const [count, setCount] = useState(0);
    return (
      <WrapperFunction handleClick={handleClick} count={count} {...props} />
    );
  }
}

const Comp1 = HOC((props) => {
  return <Component {...props} />;
});
const Comp2 = HOC((props) => {
  return <Component1 {...props} />;
});

export default function App() {
  return (
    <div className="App">
      <Comp1 name="hel" />
      <Comp2 />
    </div>
  );
}

CodeSandBox

Obwohl der Code in codesandbox funktioniert, aber aufgrund der oben genannten Regel nicht auf Ihrem lokalen Computer ausgeführt werden kann, sollten Sie die folgende Fehlermeldung erhalten, wenn Sie versuchen, diesen Code auszuführen

React Hook "useState" cannot be called inside a callback

Um dies zu umgehen, habe ich Folgendes getan

import "./styles.css";
import * as React from "react";
//macbook
function Company(props) {
  return (
    <>
      <h1>Company</h1>
      <p>{props.count}</p>
      <button onClick={() => props.increment()}>increment</button>
    </>
  );
}

function Developer(props) {
  return (
    <>
      <h1>Developer</h1>
      <p>{props.count}</p>
      <button onClick={() => props.increment()}>increment</button>
    </>
  );
}

//decorator
function HOC(Component) {
  // return function () {
  //   const [data, setData] = React.useState();
  //   return <Component />;
  // };
  class Wrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }
    handleClick = () => {
      this.setState({ count: this.state.count + 1 });
    };
    render() {
      return (
        <Component count={this.state.count} increment={this.handleClick} />
      );
    }
  }
  return Wrapper;
}

const NewCompany = HOC(Company);
const NewDeveloper = HOC(Developer);

export default function App() {
  return (
    <div className="App">
      <NewCompany name={"Google"} />
      <br />
      <NewDeveloper />
    </div>
  );
}

CodeSandbox

Question 6

Ich denke, für funktionale Komponenten funktioniert das gut

import {useEffect, useState} from 'react';

// Target Component
function Clock({ time }) {
  return <h1>{time}</h1>
}

// HOC 
function app(C) {
  return (props) => {
    const [time, setTime] = useState(new Date().toUTCString());
    useEffect(() => {
      setTimeout(() => setTime(new Date().toUTCString()), 1000);
    })
    return <C {...props} time={time}/>
  }
}

export default app(Clock);

Hier können Sie es testen: https://codesandbox.io/s/hoc-s6kmnv

Question 7

Ja, es ist möglich

import React, { useState } from 'react';

const WrapperCounter = OldComponent =>{
  function WrapperCounter(props){
    const[count,SetCount] = useState(0)
    const incrementCounter = ()=>{
        SetCount(count+1)
    }
    return(<OldComponent {...props} count={count} incrementCounter={incrementCounter}></OldComponent>)
  }
  return WrapperCounter
}

export default WrapperCounter

import React from 'react';
import WrapperCounter from './WrapperCounter';
function CounterFn({count,incrementCounter}){
    return(
        <button onClick={incrementCounter}>Counter inside functiona component {count}</button>
    )
}

export default WrapperCounter(CounterFn)