render() — react Function Reference

Architecture documentation for the render() function in TestCase.js from the react codebase.

Function javascript BabelCompiler Entrypoint called by 7

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  71b5c81a_6c35_2de0_6be2_4ff47f948410["render()"]
  e1e356f5_b085_dad5_a81f_4b4844381311["TestCase"]
  71b5c81a_6c35_2de0_6be2_4ff47f948410 -->|defined in| e1e356f5_b085_dad5_a81f_4b4844381311
  1de67a80_6288_c6c7_fac1_11313b3f8a82["MouseEnter()"]
  1de67a80_6288_c6c7_fac1_11313b3f8a82 -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  8ac5bc42_4158_d3b8_e076_6bc807d05b03["render()"]
  8ac5bc42_4158_d3b8_e076_6bc807d05b03 -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  56ab32e5_5c1c_b0b1_4295_0fefb414d0f6["render()"]
  56ab32e5_5c1c_b0b1_4295_0fefb414d0f6 -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  eed64c56_c340_a1af_9fa4_f55eb9b1f8bd["render()"]
  eed64c56_c340_a1af_9fa4_f55eb9b1f8bd -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  19745d86_cd02_fd7a_0c82_b0c22c4a45bf["render()"]
  19745d86_cd02_fd7a_0c82_b0c22c4a45bf -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  f984d8ff_206f_4a6e_4efa_d7cbbd8d932a["render()"]
  f984d8ff_206f_4a6e_4efa_d7cbbd8d932a -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  40d9fa95_7f22_055f_ab42_1280a5247085["render()"]
  40d9fa95_7f22_055f_ab42_1280a5247085 -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  style 71b5c81a_6c35_2de0_6be2_4ff47f948410 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/TestCase.js lines 33–126

  render() {
    const {
      title,
      description,
      introducedIn,
      resolvedIn,
      resolvedBy,
      affectedBrowsers,
      relatedIssues,
      children,
    } = this.props;

    let {complete} = this.state;

    const {version} = parse(window.location.search);
    const isTestFixed =
      !version || !resolvedIn || semver.gte(version, resolvedIn);

    complete = !isTestFixed || complete;

    return (
      <section className={cn('test-case', complete && 'test-case--complete')}>
        <h2 className="test-case__title type-subheading">
          <label>
            <input
              className="test-case__title__check"
              type="checkbox"
              checked={complete}
              onChange={this.handleChange}
            />{' '}
            {title}
          </label>
        </h2>

        <dl className="test-case__details">
          {introducedIn && <dt>First broken in: </dt>}
          {introducedIn && (
            <dd>
              <a
                href={'https://github.com/facebook/react/tag/v' + introducedIn}>
                <code>{introducedIn}</code>
              </a>
            </dd>
          )}

          {resolvedIn && <dt>First supported in: </dt>}
          {resolvedIn && (
            <dd>
              <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
                <code>{resolvedIn}</code>
              </a>
            </dd>
          )}

          {resolvedBy && <dt>Fixed by: </dt>}
          {resolvedBy && (
            <dd>
              <a
                href={
                  'https://github.com/facebook/react/pull/' +
                  resolvedBy.slice(1)
                }>
                <code>{resolvedBy}</code>
              </a>
            </dd>
          )}

          {affectedBrowsers && <dt>Affected browsers: </dt>}
          {affectedBrowsers && <dd>{affectedBrowsers}</dd>}

          {relatedIssues && <dt>Related Issues: </dt>}
          {relatedIssues && (
            <dd>
              <IssueList issues={relatedIssues} />
            </dd>
          )}
        </dl>

        <p className="test-case__desc">{description}</p>

        <div className="test-case__body">