Rect extension middleware

Question

Tout d'abord, je viens pour le fond de php et je suis en train de construire une sorte de middleware réagir, comme je le ferais ce serait quelque chose comme:

class Middleware extends React.Component { 
 
    funcOne(data) { 
 
    return data; 
 
    } 
 

 
    funcTwo(data) { 
 
    return (
 
     <div> 
 
     { data } 
 
     <br /> 
 
     { this.funcThree('Third function') } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class MyComponent extends Middleware { 
 
    funcOne(data) { 
 
    return `Rewrite of ${data}`; 
 
    } 
 

 
    funcThree(data) { 
 
    return data; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     { this.funcOne('First function') } 
 
     { this.funcTwo('Second function') } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class MySecondComponent extends Middleware { 
 
    funcThree(data) { 
 
    return data; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     { this.funcOne('First function') } 
 
     { this.funcTwo('Second function') } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <div> 
 
    <MyComponent /> 
 
    <hr /> 
 
    <MySecondComponent /> 
 
    </div>, 
 
    document.getElementById('root'), 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="root"></div>

Cependant, je ne peux pas vraiment trouver de documentation sur ce qu'il faut faire ou ne pas faire. Alors, est-ce faux? Et si oui, comment dois-je faire à la place?

Answer 1

Dans votre code mis à jour, il suffit de créer un composant pour funcTwo et passer un accessoire à lui:

function funcOne() { 
    return 'First function'; 
} 

function Two (props) { 
    return (
    <div> 
     Second function 
     <br /> 
     { props.three } 
    </div> 
); 
} 

//... 

    render() { 
    return (
     <div> 
     { funcOne() } 
     <br /> 
     <Two three={this.funcThree()} /> 
     </div> 
    ); 
    } 

---

Je ne l'ai jamais vu de cas d'utilisation qui doivent utiliser l'héritage dans React. Dans votre cas, créez simplement des composants ou des fonctions simples. En outre, un composant peut aussi être une fonction simple:

cela peut être un composant:

function One (props) { 
    return <h1>hello</h1> 
} 

Vous l'utiliser comme ceci:

<One /> 

Ou, si vous avez juste besoin de chaînes, tout simplement fonctions d'écriture:

function funcOne() { 
    return 'First function'; 
} 

function funcTwo() { 
    return 'Second function'; 
} 

// ... 

    render() { 
    return (
     <div> 
     { funcOne() } 
     <br /> 
     { funcTwo() } 
     </div> 
    ); 
    } 

Vous n'avez donc pas du tout besoin d'héritage. En JavaScript, en particulier React, vous devriez essayer de penser d'une manière plus fonctionnelle. Vous constaterez que c'est très puissant et flexible.

Vous trouverez une documentation officielle sur la composition composant ici: https://facebook.github.io/react/docs/composition-vs-inheritance.html

Je recommande également de lire ceci: https://facebook.github.io/react/docs/thinking-in-react.html

Answer 2

Ce que vous voulez implémenter est communément appelé un composant d'ordre supérieur. Here est le document détaillé.

Answer 3

Je pense que la façon dont vous ne réutilisez réagir dans le monde est en créant des fonctions qui prennent Composer et retourner un nouveau composant avec des fonctionnalités supplémentaires, en l'enveloppant dans un composant qui ajoute des fonctionnalités. Cela peut être fait en transmettant le composant que vous souhaitez "dériver" à une fonction ou en l'enveloppant directement dans un composant "wrapper" et en accédant au composant "wrapped" dans la propriété props.children.

const componentWithDropTargetCapabilities = addDragAndDrop(MyComponent) 

ou

<DropTarget> 
    <MyComponent /> 
</DropTarget> 

Ceux-ci sont appelés "composants d'ordre supérieur" (HOC): https://facebook.github.io/react/docs/higher-order-components.html

Jetez un oeil ar réagir-routeur Code par exemple: https://github.com/ReactTraining/react-router