render() — react Function Reference

Architecture documentation for the render() function in drag-box.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  eccd939c_f4ae_562a_1cfd_068a8a1dc650["render()"]
  b024f756_c22f_e4ec_06c3_6633345febc9["DragBox"]
  eccd939c_f4ae_562a_1cfd_068a8a1dc650 -->|defined in| b024f756_c22f_e4ec_06c3_6633345febc9
  style eccd939c_f4ae_562a_1cfd_068a8a1dc650 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/pointer-events/drag-box.js lines 52–87

  render() {
    const {hasCapture, circleLeft, circleTop} = this.state;

    const boxStyle = {
      border: '1px solid #d9d9d9',
      margin: '10px 0 20px',
      minHeight: 400,
      width: '100%',
      position: 'relative',
    };

    const circleStyle = {
      width: CIRCLE_SIZE,
      height: CIRCLE_SIZE,
      borderRadius: CIRCLE_SIZE / 2,
      position: 'absolute',
      left: circleLeft,
      top: circleTop,
      backgroundColor: hasCapture ? 'blue' : 'green',
      touchAction: 'none',
    };

    return (
      <div style={boxStyle}>
        <div
          style={circleStyle}
          onPointerDown={this.onDown}
          onPointerMove={this.onMove}
          onPointerUp={this.onUp}
          onPointerCancel={this.onUp}
          onGotPointerCapture={this.onGotCapture}
          onLostPointerCapture={this.onLostCapture}
        />
      </div>
    );
  }