TypeScript server.renderToString函數代碼示例

本文整理匯總了TypeScript中react-dom/server.renderToString函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript renderToString函數的具體用法？TypeScript renderToString怎麽用？TypeScript renderToString使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了renderToString函數的15個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: createResult

function createResult(request: Request, handler: RouteHandler, response: Response, errorStatus?: number) {
  if (isRedirect(response)) {
    return {
      preloadData: {},
      title: '',
      meta: {},
      redirectURI: (response as Redirect).uri,
      getHTML: () => '',
    };
  }

  const data = response;
  const element = createRouteElement(handler.component, {
    data,
    writeData: noOpWriteData,
    loader: request.loader,
  });
  return {
    preloadData: data,
    title: renderTitle(request.app, handler, data),
    meta: handler.renderMeta ? handler.renderMeta(data) : {},
    errorStatus,
    element,
    getHTML() {
      if (errorStatus) {
        return '';
      }
      return wrapHTML(ReactDOMServer.renderToString(element));
    }
  };
}

開發者ID:dittos，項目名稱:nuri，代碼行數:31，代碼來源:server.ts

示例2: generateHtmlFromDocument

function generateHtmlFromDocument(document: PubDocument) {
  const canvas = React.createElement(Canvas, {
    ...defaultProps,
    width: document.pages[0].width,
    height: document.pages[0].height,
    sortedShapes: document.pages[0].shapes,
  });
  return ReactDOMServer.renderToString(canvas);
}

開發者ID:carlospaelinck，項目名稱:publications-js，代碼行數:9，代碼來源:pdf.ts

示例3:

server.use((req, res) => {
    res.end(`<html> 
                <head>
                    <script src='/public/bundle.js'></script>
                    <link rel='stylesheet' id='main-css'  href='https://bootswatch.com/cosmo/bootstrap.min.css' type='text/css' media='all' />
                    </head>
                <body>
                    <div id='root'>${DOMServer.renderToString(Page)}</div>
                </body>
            </html>`);
});

開發者ID:GauSim，項目名稱:Convert，代碼行數:11，代碼來源:index.ts

示例4: renderHTML

export function renderHTML(
	ref: Reflection,
	settings: Partial<ReactConverterSettings> = {}
): string {
	const set = normalizeSettings(settings) as ViewSettings

	if (ref.id) {
		set.path = formatLink(ref.id).href
	} else if (ref.kind === ReflectionKind.Search) {
		set.path = '_search'
	} else {
		set.path = ''
	}

	const el = React.createElement(PageView, { reflection: ref, settings: set })
	const html = renderToString(el)

	const name = (ref as any).name || (ref.id && ref.id[ref.id.length - 1].name)
	const base = path.relative(set.path, './')

	return `
		<html>
			<head>
				<meta charset="UTF-8">
				<title>${name} - TypeScript</title>
				<script>
					__webpack_public_path__ = "${base}"
				</script>
				<base href="${base || '.'}" />
				<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"/>
				<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
				<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
				<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" defer></script>
				<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" defer></script>
				<script crossorigin src="https://unpkg.com/prettier@1.14.3/standalone.js" defer></script>
				<script crossorigin src="https://unpkg.com/prettier@1.14.3/parser-typescript.js" defer></script>
				<link rel="stylesheet" type="text/css" href="${set.manifest['index.css']}"/>
				<script>
					window.__argv = ${JSON.stringify(set)}
					var ref = "${encodeURIComponent(JSON.stringify(ref))}";
					window.__ref = JSON.parse(decodeURIComponent(ref))
				</script>
				<script type="text/javascript" src="${set.manifest['index.js']}" defer></script>
			</head>
			<body class="${BodyStyle}">
				${includeGoogleTracking(set)}
				<div id='react-app'>${html}</div>
			</body>
		</html>
	`
}

開發者ID:docscript，項目名稱:docscript，代碼行數:51，代碼來源:html.ts

示例5: encodeURI

 .then(({ store, client }) => {
   let markup = ReactDOM.renderToString(component);
   let initialState = store.getState();
   const key = client.reduxRootKey;
   // XXX apollo client requires a lot in the store
   // can we make this samller?
   for (let queryId in initialState[key].queries) {
     let fieldsToNotShip = ['minimizedQuery', 'minimizedQueryString'];
     for (let field of fieldsToNotShip)  delete initialState[key].queries[queryId][field];
   }
   initialState = encodeURI(JSON.stringify(initialState));
   const payload = `<script>window.__APOLLO_STATE__ = ${initialState};</script>`;
   markup += payload;
   return markup;
 });

開發者ID:dahjelle，項目名稱:react-apollo，代碼行數:15，代碼來源:server.ts

示例6: match

 match({routes: routes, location: req.url}, function(error, redirectLocation, renderProps) {
   if (error) {
     res.status(500).send(error.message)
   } else if (redirectLocation) {
     res.redirect(302, redirectLocation.pathname + redirectLocation.search)
   } else if (renderProps) {
     res.send("<!DOCTYPE html>"+
       ReactDOMServer.renderToString(
         Provider({store: store}, RouterContext(renderProps))
       )
     );
   } else {
     res.status(404).send('Not found')
   }
 });

開發者ID:brendangkchan，項目名稱:bgkchan，代碼行數:15，代碼來源:server.ts

示例7: renderPage

function renderPage({ content, title }: Response, elementID: string, initialState: {}) {
  return `<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>${title}</title>
  </head>
  <body>
    <div id="${elementID}">${ReactDOM.renderToString(content)}</div>
    <script>
      var __reduxAppInitialState = ${JSON.stringify(initialState)}
    </script>
    <script src="/bundle.js"></script>
  </body>
</html>`
}

開發者ID:chrisdevereux，項目名稱:ts-react，代碼行數:17，代碼來源:server.ts

示例8: dataCallback

            subscribe: (dataCallback, endCallback) => {
                if (complete) {
                    dataCallback(result);
                    endCallback()
                } else if (!complete && !this.useStream) {
                    complete = true;
                    result = renderToStringSync(React.createElement(this.component, props));
                    dataCallback(result);
                    endCallback();
                } else if (!complete && this.useStream) {
                    if (started) {
                        if (result) {
                            dataCallback(result);
                        }

                        listeners.push({dataCallback, endCallback});
                    } else {
                        started = true;
                        listeners.push({dataCallback, endCallback});

                        const stream = renderToStringAsync(React.createElement(this.component, props));

                        stream.on('data', (data: string) => {
                            if (result) {
                                result += data;
                            } else {
                                result = data;
                            }

                            listeners.forEach(listener => {
                                listener.dataCallback(data);
                            });
                        });

                        stream.on('end', () => {
                            complete = true;
                            started = false;
                            listeners.forEach(listener => listener.endCallback());
                            listeners = [];
                        });
                    }
                } else {
                    throw new Error('You should not be here');
                }
            },

開發者ID:vslinko，項目名稱:web-architecture-experiments，代碼行數:45，代碼來源:react_widget.ts

示例9: createElement

const renderHTML = (store: Store<State>): string => {
  const element = createElement(Root, { store });
  const app = renderToString(element);
  const initialState = store.getState();
  const html = `
<html>
  <head><title>TITLE</title></head>
  <body>
    <div class="app">${app}</div>
    <script>
      window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
    </script>
    <script src="${scriptRootDir}/index.js"></script>
  </body>
</html>
  `;
  return html;
};

開發者ID:bouzuya，項目名稱:peggie2，代碼行數:18，代碼來源:server.ts

示例10: renderHtml

function renderHtml(app: JSX.Element, store: Store<State>): string {
    console.log('<< render html >>');
    let html = `
        <!doctype html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <meta name="viewport"
                      content="width=device-width, initial-scale=1">
                <title>Todos</title>
                <link href="styles.css" media="all" rel="stylesheet">
            </head>
            <body>
                <div id="root"><div>${renderToString(app)}</div></div>
                <script>__STATE__=${JSON.stringify(store.getState())};</script>
                <script src="bundle.js"></script>
            </body>
        </html>`;

    return html.trim();
}

開發者ID:pslotinsky，項目名稱:todos，代碼行數:21，代碼來源:server.ts

示例11: express

const PATH = {
  react: './app/js/',
  public: './public/'
};

const initData = {
  message: 'world ! =)'
};

// Settings
const app = express();
app.use(express.static(PATH.public));

const App = React.createFactory(require(PATH.react +'App').default);
const ReactApp = ReactDOMServer.renderToString(App(initData));

const body = `<html><head>`
  + `<meta charSet="utf-8" />`
  + `<title>Isomorphic app</title>`
  + `</head><body>`
  + `<div id="reactApp">${ReactApp}</div>`
  + `<script id="init_data" data-value='${JSON.stringify(initData)}'></script>`
  // + `<script type="text/javascript" src="${PATH.public}/bundle.js?v=111"></script>`
  + `</body></html>`;


app.get('/', (req: express.Request, res: express.Response) => {
  res.send('<!DOCTYPE html>'+ body);
});

開發者ID:thibaudbe，項目名稱:poc，代碼行數:29，代碼來源:app.ts

示例12: it

 it('renderToString', () => {
     const content: string = ReactDOMServer.renderToString(React.createElement('div'));
 });

開發者ID:Crevil，項目名稱:DefinitelyTyped，代碼行數:3，代碼來源:react-dom-tests.ts

示例13: it

 it("Identity functor should not throw an exception", () => {
     // Force the whole tree to be evaluated. If we don't do this then the
     // tree will be evaluated only up to the components.
     renderToString(idReactElement(rootElement));
 });

開發者ID:wereHamster，項目名稱:react-functors，代碼行數:5，代碼來源:test.ts

示例14: renderDocument

export function renderDocument(reactElement: React.ReactElement<any>): string {
    return `<!DOCTYPE html>${ReactDomServer.renderToString(reactElement)}`;
}

開發者ID:yasupeke，項目名稱:niconico-desktop-server，代碼行數:3，代碼來源:renderer.ts

示例15: getDataFromTree

 return getDataFromTree(component).then(() =>
   ReactDOM.renderToString(component),

開發者ID:EdtechFoundry，項目名稱:react-apollo，代碼行數:2，代碼來源:server.ts

注：本文中的react-dom/server.renderToString函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。