render() — react Function Reference

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

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  72537beb_1cf5_b1e5_b064_82b02c2169af["render()"]
  b62f15b5_98c7_79a6_926d_62a8d7a558a6["DrawBox"]
  72537beb_1cf5_b1e5_b064_82b02c2169af -->|defined in| b62f15b5_98c7_79a6_926d_62a8d7a558a6
  style 72537beb_1cf5_b1e5_b064_82b02c2169af fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/pointer-events/hover-box.js lines 4–31

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

    const obstacleStyle = {
      border: '1px solid #d9d9d9',
      width: '25%',
      height: '200px',
      margin: '12.5%',
      display: 'inline-block',
    };

    return (
      <div
        style={boxStyle}
        onPointerOver={this.props.onOver}
        onPointerOut={this.props.onOut}
        onPointerEnter={this.props.onEnter}
        onPointerLeave={this.props.onLeave}>
        <div style={obstacleStyle} />
        <div style={obstacleStyle} />
      </div>
    );
  }