render() — react Function Reference

Architecture documentation for the render() function in mouse-movement.js from the react codebase.

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  8ac5bc42_4158_d3b8_e076_6bc807d05b03["render()"]
  05f433e0_65e7_d8a6_31a2_489dc5501c92["MouseMovement"]
  8ac5bc42_4158_d3b8_e076_6bc807d05b03 -->|defined in| 05f433e0_65e7_d8a6_31a2_489dc5501c92
  71b5c81a_6c35_2de0_6be2_4ff47f948410["render()"]
  8ac5bc42_4158_d3b8_e076_6bc807d05b03 -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  style 8ac5bc42_4158_d3b8_e076_6bc807d05b03 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js lines 14–45

  render() {
    const {x, y} = this.state;

    const boxStyle = {
      padding: '10px 20px',
      border: '1px solid #d9d9d9',
      margin: '10px 0 20px',
    };

    return (
      <TestCase
        title="Mouse Movement"
        description="We polyfill the movementX and movementY fields."
        affectedBrowsers="IE, Safari">
        <TestCase.Steps>
          <li>Mouse over the box below</li>
        </TestCase.Steps>

        <TestCase.ExpectedResult>
          The reported values should equal the pixel (integer) difference
          between mouse movements positions.
        </TestCase.ExpectedResult>

        <div style={boxStyle} onMouseMove={this.onMove}>
          <p>Trace your mouse over this box.</p>
          <p>
            Last movement: {x},{y}
          </p>
        </div>
      </TestCase>
    );
  }