Wohin fließen Props mit compose()?

Question

Betrachten Sie das folgende:

const Foo = defaultProps({ 
     foo: "foo" 
}); 

compose(
    Foo, 
    LoadJson, 
    RunParser 
)(Bar); 

In diesem Fall wird foo die Stütze nach unten durch LoadJson->RunParser->Bar fließen? Oder ist es in umgekehrter Reihenfolge, wo foo durch RunParser->LoadJson->Bar fließt?

Gibt es eine bessere Möglichkeit, sich dies konzeptionell vorzustellen als einen linearen Fluss wie diesen?

Answer 1

Wie Sie sehen here, die Requisiten fließen von links nach rechts, was bedeutet, Requisiten, die auf der linken Seite definiert wurden, sind für HOCs auf der rechten Seite sichtbar. Also in Ihrem Fall loadJson und RunParser sollte die Stütze foo

const enhance = compose(
    withProps({ 
    offset: 10, 
    }), 
    withState('count', 'updateCount', 0), 
    withHandlers({ 
    increment: props =>() => props.updateCount(n => n + 1 + props.offset), 
    decrement: props =>() => props.updateCount(n => n - 1) 
    }) 
) 

const Counter = enhance(({ count, increment, decrement }) => 
    <div> 
    Count: {count} 
    <div> 
     <button onClick={increment}>+</button> 
     <button onClick={decrement}>-</button> 
    </div> 
    </div> 
)