當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript server.renderToStaticMarkup函數代碼示例

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


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

示例1: it

  it('should render the main example', function () {
    const TEXT_STYLE = Style.registerStyle({
      backgroundColor: 'red'
    })

    const App = Style.component(React.createClass({

      displayName: 'App',

      render: function () {
        return React.createElement(
          'div',
          { className: TEXT_STYLE },
          'Hello world!',
          React.createElement(Style.Element)
        )
      }

    }))

    expect(renderToStaticMarkup(React.createElement(App))).to.equal(
      '<div class="' + TEXT_STYLE + '">' +
      'Hello world!' +
      '<style>.' + TEXT_STYLE + '{background-color:red}</style>' +
      '</div>'
    )
  })
開發者ID:agrady42,項目名稱:react-free-style,代碼行數:27,代碼來源:react-free-style.spec.ts

示例2: print_code

export function print_code(opts: Options) {
  const w = popup("");

  let options = fromJS(opts.options);
  options = options.delete("lineNumbers"); // doesn't work yet

  // We add a trailing whitespace, since some printers grey the last line (e.g., chrome, but not firefox)
  const value = opts.value + "\n";
  const props = {
    value,
    options,
    style: { background: "white", padding: "7%", width: "auto" },
    no_border: true
  };
  const s: string = renderToStaticMarkup(
    React.createElement(CodeMirrorStatic, props)
  );

  const t: string = `\
<html lang="en">
    <head>
        <title>${path_split(opts.path).tail}</title>
        <meta name="google" content="notranslate"/>
        <style>${CODEMIRROR_CSS}</style>
    </head>
    <body style='font-size:${opts.font_size}'>
        ${s}
    </body>
</html>\
`;
  w.document.write(t);
  w.document.close();
  print_window(w);
}
開發者ID:DrXyzzy,項目名稱:smc,代碼行數:34,代碼來源:print-code.ts

示例3: async

  return async (req, res, next) => {
    const session = app.createSession() as TuxServerSession

    session.req = req
    session.res = res

    try {
      const body = await app.renderServer(
        session,
        ReactDOMServer.renderToString
      )

      // render middlewares might respond early, eg redirects.
      if (!res.headersSent) {
        const html = createElement(
          Document,
          {
            ...session.document,
            css: assets.css,
            js: assets.js,
          },
          body
        )

        res.send('<!doctype html>' + ReactDOMServer.renderToStaticMarkup(html))
      }
    } catch (error) {
      next(error)
    }
  }
開發者ID:aranja,項目名稱:tux,代碼行數:30,代碼來源:server.ts

示例4: handleRender

    return function handleRender(req: express.Request, res: express.Response, next: express.NextFunction) {

        // Ignote static assets
        if (req.url.indexOf(".") === -1) {

            let result = bootstrap({
                container: "root",
                createHistory: createMemoryHistory,
                initialState: {},
                middlewares: [thunk],
                reducers: {
                    repos: reposReducer,
                    users: usersReducer
                },
                render: () => { /*  skip first render, we navigate first */ },
                routes: routes
            });

            result.history.push(req.url);

            let state = result.store.getState();

            let html = renderFullPage(
                css,
                renderToStaticMarkup(result.root),
                JSON.stringify(state)
            );

            res.send(html);

        } else {
            next();
        }

    };
開發者ID:redux-bootstrap,項目名稱:redux-bootstrap-example,代碼行數:35,代碼來源:server.ts

示例5: write_content

function write_content(w, opts: PrintOptions): void {
  if (!opts.path) throw Error("write_content -- path must be defined");
  const split = path_split(opts.path);

  let html: string;
  if (opts.html == null) {
    const props = {
      value: opts.value,
      project_id: opts.project_id,
      file_path: split.head
    };

    const C = React.createElement(
      Redux,
      { redux } as any,
      React.createElement(HTML, props)
    );
    html = ReactDOMServer.renderToStaticMarkup(C);
  } else {
    html = opts.html;
  }
  const title: string = path_split(opts.path).tail;
  html = html_with_deps(html, title);
  w.document.write(html);
  w.document.close();
}
開發者ID:DrXyzzy,項目名稱:smc,代碼行數:26,代碼來源:print.ts

示例6: createElement

 pages.forEach(({ fields }) => {
   // render page
   const Component = createElement(App, fields);
   const markup = ReactDOMServer.renderToStaticMarkup(Component);
   const html = generateHtml(markup);
   // save page to disk
   savePageToDisk(fields.slug, html);
 });
開發者ID:anater,項目名稱:anater.github.io,代碼行數:8,代碼來源:index.ts

示例7: createMessageFragment

function createMessageFragment(message: Message): DocumentFragment {
    const reactTree = React.createElement(MessageItem, {
        message: message,
    });
    const html = ReactDOMServer.renderToStaticMarkup(reactTree);

    const range = document.createRange();
    range.selectNode(document.body);
    const fragment = range.createContextualFragment(html);
    return fragment;
}
開發者ID:karen-irc,項目名稱:karen,代碼行數:11,代碼來源:MessageContentView.ts

示例8: createChannelWindowListFragment

function createChannelWindowListFragment(list: Array<Channel>): DocumentFragment {
    const reactTree = React.createElement(ChatWindowList, {
        list: list,
    });
    const html = ReactDOMServer.renderToStaticMarkup(reactTree);

    const range = document.createRange();
    range.selectNode(document.body);
    const fragment = range.createContextualFragment(html);
    return fragment;
}
開發者ID:saneyuki,項目名稱:karen,代碼行數:11,代碼來源:MainContentAreaView.ts

示例9: createChannelFragment

function createChannelFragment(domain: ChannelDomain): DocumentFragment {
    const reactTree = React.createElement(ChatWindowItem, {
        channel: domain.getValue(),
    });
    const html = ReactDOMServer.renderToStaticMarkup(reactTree);

    const range = document.createRange();
    range.selectNode(document.body);
    const fragment = range.createContextualFragment(html);
    return fragment;
}
開發者ID:saneyuki,項目名稱:karen,代碼行數:11,代碼來源:MainContentAreaView.ts


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