2016-09-22 12 views
5

Uczę się o HOC z tego article, ale wcześniej nie widziałem proc i method. Do czego odnoszą się te osoby?Co to jest proc i metoda w reakcji na javascript?

function refsHOC(WrappedComponent) { 
    return class RefsHOC extends React.Component { 
    proc(wrappedComponentInstance) { 
     wrappedComponentInstance.method() 
    } 

    render() { 
     const props = Object.assign({}, this.props, {ref: this.proc.bind(this)}) 
     return <WrappedComponent {...this.props}/> 
    } 
    } 
} 

Odpowiedz

6

this.proc dotyczy sposobu

proc(wrappedComponentInstance) { 
    wrappedComponentInstance.method() 
} 

wrappedComponentInstance.method() jest tylko przykładowy sposób wywołać dowolny sposób na zawiniętej składnika. W artykule czytamy:

w poniższym przykładzie badamy jak uzyskać dostęp do metody instancji i instancji sam z WrappedComponent poprzez odn


tak, to nie ma nic wspólnego z konkretną reakcją.

+0

co robi proces? czy po prostu zwraca odwołanie do metody()? Nigdy o tym nie słyszałem ani nie czytałem. – stackjlei

+2

Przerysujesz to. 'RefsHOC' jest klasą. Ta klasa definiuje metodę 'proc'. Instancja klasy może uzyskać dostęp do metody poprzez 'ten.proc'. Oto inny uproszczony przykład: 'class Foo {bar() {} baz() {this.bar()}'. Każde wystąpienie 'Foo' będzie miało metody' bar' i 'baz'. 'baz' nazywa' bar' za pomocą 'this.bar()'. Lub jeszcze bardziej uproszczone: 'var foo = {bar() {}, baz() {this.bar()}}'. 'foo' jest obiektem z dwiema metodami. 'foo.baz()' również wywoła 'foo.bar' przez' this.bar() '. –

+2

* "co robi proc?" * Jest tam w kodzie: 'wrappedComponentInstance.method()'. Wywołuje metodę 'method' z argumentu, który jest przekazywany. –

2

Natknęłam się na ten sam artykuł i początkowo byłam zdezorientowana. Zepsułem to do składni ES6, aby uczynić rzeczy bardziej przejrzystymi dla użytkowników, którzy również są zdezorientowani.

export default WrappedComponent => 
    class extends Component { 

    //Proc function that gets called 
    proc = wrappedComponentInstance => { 
     wrappedComponentInstance.method() 
    } 

    render() { 
     const props = { ...this.props, ...{ ref: this.proc } } 
     return <WrappedComponent {...props} /> 
    } 
}