react-dom#render TypeScript Examples

export function renderSamplesList(target: HTMLElement,
                                  openSample: (url: string) => void,
                                  getSamples: () => Promise<BallerinaExampleCategory[]>,
                                  openLink: (url: string) => void) {
    const props = {
        getSamples,
        openLink,
        openSample,
    };
    target.classList.add("composer");
    const SamplesListElement = createElement(SamplesList, props);
    render(SamplesListElement, target);
}

renderMarkerComponent = (
  component: renderMarker,
  marker: AMap.Marker
) => {
  let child: string | React.ReactNode = component;
  if (isFun(component)) {
    const extData = marker.getExtData();
    child = component(extData);
  }
  if (child) {
    render(<div>{child}</div>, marker.getContent() as Element);
  }
}

public addSearchBox(htmlId: string, parameters?: Store.SuggestionsParametersUpdate, suggestionValueKey?: string, mustacheTemplate?: string, cssClasses?: { [key: string]: string; }) {
        this.store.updateSuggestionsParameters(parameters);
        let template = mustacheTemplate ? compile(mustacheTemplate) : null;
        render(
            <Provider store={this.store.store}>
                <SearchBoxContainer template={template} css={cssClasses} suggestionValueKey={suggestionValueKey} />
            </Provider>,
            document.getElementById(htmlId)
        );
    }

it("should show message if building cannot be destroyed", () => {
  act(() => {
    render(
      <BuildingCard
        zapLevel={1}
        quakeLevel={1}
        spellCapacity={1}
        building={building}
      />,
      container
    );
  });
  const span = container.querySelector(".no-combination");
  expect(span?.textContent).toBeDefined();
});

window.addEventListener('message', (ev: MessageEvent<AudioData | ErrorMessage>) => {
    switch (ev.data.type) {
        case 'audioData':
            render(<SoundPlayer audioData={ev.data} />, root)
            break
        case 'error':
            render(<Error message={ev.data.message} />, root)
            break

    }
})

renderApp = (v: string) => {
  const appContainer = document.querySelector('#app');
  const mode = isRender() ? MODE.RENDER : MODE.HYDRATE;

  if (v === 'SSR' && appContainer && !isFailSsr()) {
    const components = buildServerComponents(mode);
    const ssr = renderToString(<App initialStep={v} components={components} />);
    appContainer.innerHTML = isRender() ? `<div>${ssr}</div>` : ssr;
  }
  if (v === 'PAINT LOADING') {
    const components = buildClientComponents(mode);
    const renderer = isRender() ? render : hydrate;

    renderer(<App initialStep={v} components={components} />, appContainer);
  }
}

mount = async () => {
    const root = document.getElementById('root')!;
    render(
        <StrictMode>
            <App />
        </StrictMode>,
        root.appendChild(document.createElement('div'))
    );
}

describe('BackToTop', () => {
  Element.prototype.scrollTo = function (opt?: ScrollToOptions | number) {
    if (typeof opt !== 'number') {
      const { top, left } = opt as ScrollToOptions;
      this.scrollTop = top || 0;
      this.scrollLeft = left || 0;
    }
  };
  it('should back to top', async () => {
    document.body.innerHTML = '<div id="main" style="height: 400px; overflow-y: auto"></div>';
    const div = document.getElementById('main') as HTMLDivElement;
    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x: number, y: number) => {
      div.scrollLeft = x;
      div.scrollTop = y;
    });
    act(() => {
      render(
        <div id="child" style={{ height: '1000px' }}>
          <BackToTop />
        </div>,
        div,
      );
    });
    window.scrollTo(0, 500);
    expect(div.scrollTop).toBe(500);
    act(() => {
      div.dispatchEvent(new Event('scroll'));
    });
    const button = document.querySelector('.scroll-top-btn') as Element;
    act(() => {
      button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    });
    expect(div.scrollTop).toBe(0);
    scrollToSpy.mockRestore();
    unmountComponentAtNode(div);
  });
});

(async function () {
  try {
    const configStorage = new Storage('config-v0.8:')
    const config = new Config(configStorage);
    Registry.getInstance().put({ api: config, name: 'config' })
  } catch (e) { }
  const theme = new ThemeModule()
  theme.initTheme()

  render(
    <React.StrictMode>
      <Preload></Preload>
    </React.StrictMode>,
    document.getElementById('root')
  )
})()

renderPreview = (
  content: HTMLCanvasElement | Error,
  previewNode: HTMLDivElement,
) => {
  unmountComponentAtNode(previewNode);
  previewNode.innerHTML = "";
  if (content instanceof HTMLCanvasElement) {
    previewNode.appendChild(content);
  } else {
    render(<ErrorCanvasPreview />, previewNode);
  }
}

constructor(content: ContentContainer, runtime: any, opts: { editable?: (state: EditorState) => boolean } = {}) {
    super();
    this.content = content;
    this.runtime = runtime;
    this.opts = opts;

    this.editorVNode = this.setupEditor();
    this.editor = render(this.editorVNode, this) as unknown as RichMarkdownEditor;
  }

(async () => {
  const { app, chat }: { app: AppState; chat: ChatState } = await requestInitialState();
  const reducer = combineReducers({ app: createAppReducer(app), chat: createChatReducer(chat) });

  const store = createSharedStore(reducer);

  const target = document.getElementById("app");
  render(
    <Provider store={store}>
      <CardContainerComponent />
    </Provider>,
    target
  );
})();

CustomOverlayDom.prototype.initialize = function(map: BMapGL.Map){
    this._map = map;
    this._div = document.createElement("div");
    this._div.style.position = "absolute";
    this._div.style.zIndex = this._options.zIndex || BMapGL.Overlay.getZIndex(this._point.lat);
    render(this._html, this._div);
    this._div.onmousedown = function(event: Event){
        event = event || window.event;
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        return false;
    }
    map.getPanes().floatShadow!.appendChild(this._div);
    return this._div;
}

public async run(): Promise<void> {
    const profileArea = $('.js-profile-editable-area').parent();
    const newContainer = document.createElement('div');
    newContainer.id = 'developer-acti-infl-trend';
    newContainer.style.width = '100%';
    this._currentDeveloper = $('.p-nickname.vcard-username.d-block')
      .text()
      .trim();

    render(
      <DeveloperActiInflTrendView currentDeveloper={this._currentDeveloper} />,
      newContainer
    );
    profileArea.after(newContainer);
  }

export function renderATNDecoderUI(): void {
	const el = document.querySelector("[panelid=occultist]");
	if (!el) {
		console.error(el);
	}

	render(
		<Provider store={rootStore}>
			<ErrorBoundary>
				<ATNDecoderContainer />
			</ErrorBoundary>
		</Provider>, el as HTMLElement,
	);
}

render(
  <StrictMode>
    <Provider store={store}>
      <ThemeWrapper>
        <App />
      </ThemeWrapper>
    </Provider>
  </StrictMode>,
  document.getElementById("root")
);

render(
  <MainProvider>
    <ThemeProvider>
      <DeleteConfirmProvider>
        <SmallTextProvider>
            <App />
        </SmallTextProvider>
      </DeleteConfirmProvider>
    </ThemeProvider>
  </MainProvider>,
  document.getElementById("root")
);

public render() {
    if (!this.props.testComponentName || this.props.testComponentName === '/') {
      return <h1>No test component specified {this.props.testComponentName}</h1>;
    }
    let TestComponent: React.ComponentType;
    Object.keys(testComponents).map((name) => {
      if (name.toLocaleLowerCase() === this.props.testComponentName) {
        TestComponent = testComponents[name];
      }
    });
    // const TestComponent = OtestComponents[this.props.testComponentName];
    if (!TestComponent) {
      if (this.props.testComponentName === 'index') {
        return <Index />;
      }
      throw new Error('No test component found for name: ' + this.props.testComponentName);
    }
    return <TestComponent />;
  }

document.addEventListener('DOMContentLoaded', () => {
  if (process.platform === 'darwin') {
    const windowTopBar = document.createElement('div');
    windowTopBar.style.width = '100%';
    windowTopBar.style.height = '50px';
    windowTopBar.style.position = 'absolute';
    windowTopBar.style.top = '0';
    windowTopBar.style.left = '0';
    // @ts-ignore: all good here
    windowTopBar.style.webkitAppRegion = 'drag';
    windowTopBar.style.pointerEvents = 'none';
    document.body.appendChild(windowTopBar);
  }

  // eslint-disable-next-line global-require
  const Root = require('./containers/Root').default;
  render(
    <AppContainer>
      <Suspense fallback="loading">
        <Root store={store} history={history} />
      </Suspense>
    </AppContainer>,
    document.getElementById('root')
  );
});

(async () => {
  await getHost();
  await loadUser();

  render(
    <Router>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <Modal />

          <Global theme={theme} />

          <Component />
        </ThemeProvider>
      </Provider>
    </Router>,
    global.document.getElementById('root'),
  );
})();

/**
   * 渲染搜索结果到页面上
   */
  renderNoteResult(noteList: SearchNote[]): void {
    const $rhs = this.createContainer()
    const $root = document.createElement('div')
    $root.className = 'joplin-root'
    $rhs.appendChild($root)
    render(<JoplinNoteList noteList={noteList} />, $root)
  }

export function drawComponentFromJsonObject(jsonObject: TRawComponent, renderer: CanvasEditorRenderer, isPaste = false): WebGLComponent {
  let root: WebGLComponent | null = null;
  const queue = [jsonObject];
  const map = new Map<string, WebGLComponent>();

  while (queue.length) {
    const front = queue.shift() as TRawComponent;
    let parent;
    if (map.has(front.id)) {
      parent = map.get(front.id);
    } else {
      parent = new (ComponentMap as any)[front.type][front.name](
        front.props.position
      ) as WebGLComponent;
      setComponentProps(parent, front.props);
      map.set(front.id, parent);
    }

    if (root === null) {
      root = parent as WebGLComponent;
      renderer.addRootComponent(root as WebGLComponent);
    }

    for (let v of front.children) {
      queue.push(v);
      const child = new (ComponentMap as any)[v.type][v.name](v.props.position, v.props.size) as WebGLComponent;
      setComponentProps(child, v.props);
      renderer.addComponentForParent(parent as WebGLComponent, child);
      map.set(v.id, child);
    }
  }
  const component = root as WebGLComponent;
  isPaste && component.setPosition({
    x: component.getPosition().x + 10,
    y: component.getPosition().y + 10
  });
  renderer.getComponentManager().showCurrentComponentTransformer(
    root?.getId() as string
  );
  renderer.render();
  return component;
}

selfChangingVisRenderer: () => ExpressionRenderDefinition<CohortVisRenderValue> = () => ({
  name: 'cohort_vis',
  reuseDomNode: true,
  render: async (domNode, config, handlers) => {
    handlers.onDestroy(() => {
      unmountComponentAtNode(domNode);
    });

    render(<CohortComponent renderComplete={handlers.done} {...config} />, domNode);
  },
})

// proxy store

store
  .ready() // wait for proxy store to connect to background Marina store
  .then(() => {
    render(
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>,
      document.getElementById('root')
    );
  })
  .catch(console.error);

render(<App />, document.getElementById('app'))

public addPager(htmlId: string, cssClasses?: { [key: string]: string; }) {
        render(
            <Provider store={this.store.store}>
                <PagerContainer css={cssClasses} />
            </Provider>,
            document.getElementById(htmlId)
        );
    }

render(<Root />, document.getElementById("root"));

render(<App />, document.getElementById('root'));

render(<Router />, document.getElementById('root'))