• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript server.renderToString函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中react-dom/server.renderToString函数的典型用法代码示例。如果您正苦于以下问题:TypeScript renderToString函数的具体用法?TypeScript renderToString怎么用?TypeScript renderToString使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了renderToString函数的17个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的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/[email protected]/standalone.js" defer></script>
				<script crossorigin src="https://unpkg.com/[email protected]/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


示例16: renderToString

  app.use(context => {

    context.body = '<!DOCTYPE html>' + renderToString(createElement(HTMLPage))

  })
开发者ID:Edward-Lombe,项目名称:elm-electron,代码行数:5,代码来源:server.ts


示例17: renderToString

 reduce: ({selfPost}) => (
   renderToString(Post(selfPost))
 ),
开发者ID:josephg,项目名称:statecraft,代码行数:3,代码来源:server.ts



注:本文中的react-dom/server.renderToString函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript test-utils.createRenderer函数代码示例发布时间:2022-05-25
下一篇:
TypeScript server.renderToStaticMarkup函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap