ChildComponent() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ChildComponent() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-dom/src/__tests__/ReactTreeTraversal-test.js lines 17–39

const ChildComponent = ({id, eventHandler}) => (
  <div
    id={id + '__DIV'}
    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={id + '__DIV_1'}
      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={id + '__DIV_2'}
      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>
);