ParentComponent() — react Function Reference

Architecture documentation for the ParentComponent() function in ReactTreeTraversal-test.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ParentComponent() — react Function Reference

Dependency Diagram

graph TD
  3d8ba211_20aa_4010_b250_10d15d2f61c4["ParentComponent()"]
  2a8879f9_e2cf_3c63_dcfb_2d016f18ef8c["ReactTreeTraversal-test.js"]
  3d8ba211_20aa_4010_b250_10d15d2f61c4 -->|defined in| 2a8879f9_e2cf_3c63_dcfb_2d016f18ef8c
  style 3d8ba211_20aa_4010_b250_10d15d2f61c4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom/src/__tests__/ReactTreeTraversal-test.js lines 41–65

const ParentComponent = ({eventHandler}) => (
  <div
    id="P"
    onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
    onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
    onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
    onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}>
    <div
      id="P_P1"
      onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
      onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
      onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
      onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}>
      <ChildComponent id="P_P1_C1" eventHandler={eventHandler} />
      <ChildComponent id="P_P1_C2" eventHandler={eventHandler} />
    </div>
    <div
      id="P_OneOff"
      onClickCapture={e => eventHandler(e.currentTarget.id, 'captured', e.type)}
      onClick={e => eventHandler(e.currentTarget.id, 'bubbled', e.type)}
      onMouseEnter={e => eventHandler(e.currentTarget.id, e.type)}
      onMouseLeave={e => eventHandler(e.currentTarget.id, e.type)}
    />
  </div>
);