TypeScript react.createFactory函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

在下文中一共展示了createFactory函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: test

function test() {
    const store = createStore(combineReducers({ toastr: toastrReducer }));
    var toastrFactory = React.createFactory(ReduxToastr);
    var element = toastrFactory({ timeOut: 1000, newestOnTop: false });
    var providerFactory = React.createFactory(Provider);
    var root = providerFactory({ store: store }, element);

    function callback() { }

    toastr.clean();
    toastr.confirm("Test", { onOk: callback, onCancel: callback });
    toastr.error("Error", "Error message");
    toastr.info("Info", "Info test", { timeOut: 1000, removeOnHover: true, onShowComplete: callback });
    toastr.success("Test", "Test message", { component: new React.Component({}) });
}

开发者ID:AbraaoAlves，项目名称:DefinitelyTyped，代码行数:15，代码来源:react-redux-toastr-tests.ts

示例2: function

app.get(routes, function(req, res) {
  const ReactRouter = require('react-router');
  const match = ReactRouter.match;
  const RouterContext = React.createFactory(ReactRouter.RouterContext);
  const Provider = React.createFactory(require('react-redux').Provider);
  const routes = require('./public/routes.js').routes
  var store = require('./public/redux-store');

  const initialState = {
    images: {
      image: null,
      preloadedThumbnails: false  
    },
    shopify: {
      product: null,
      products: null,
      cart: null
    }
  }

  store = store.configureStore(initialState);

  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，代码行数:38，代码来源:server.ts

示例3: render

import * as ReactDOM from 'react-dom';
import {AppViewState} from '../app-view-state';

const {div, button} = React.DOM;


class AppView extends React.Component<AppViewState,any> {
  render() {
    const p = this.props;
    return div({},
      p.patches.map(patch =>
        button({
          key: patch.name,
          className: p.currentPatch === patch ? 'selected' : '',
          onClick: () => {
            p.controller.setPatch(patch)
          }
        }, patch.name)
      )
    );
  }
}

const appView = React.createFactory(AppView);


function render(viewState: AppViewState) {
  ReactDOM.render(appView(viewState), document.getElementById('app'));
}

export default render;

开发者ID:shybyte，项目名称:web-midi-patcher，代码行数:31，代码来源:app-view.ts

示例4: createReactClass

            DOM.input({
                ref: input => this._input = input,
                value: this.state.bar
            }));
    }
});

const ClassicComponentNoProps: React.ClassicComponentClass = createReactClass({
    render() {
        return DOM.div();
    }
});

// React.createFactory
const classicFactory: React.ClassicFactory<Props> =
    React.createFactory(ClassicComponent);
const classicFactoryElement: React.ClassicElement<Props> =
    classicFactory(props);

// React.createElement
const classicElement: React.ClassicElement<Props> = React.createElement(ClassicComponent, props);
const classicElementNullProps: React.ClassicElement<{}> = React.createElement(ClassicComponentNoProps, null);

// React.cloneElement
const clonedClassicElement: React.ClassicElement<Props> =
    React.cloneElement(classicElement, props);

// ReactDOM.render
const classicComponent: React.ClassicComponent<Props> = ReactDOM.render(classicElement, container);

//

开发者ID:dmitryrogozhny，项目名称:DefinitelyTyped，代码行数:31，代码来源:create-react-class-tests.ts

示例5: render

import * as React from "react";
let { div, p, button } = React.DOM;
import { bindActionCreators } from "redux";
import { Connector } from "react-redux";

import * as D from "../definitions";


interface CardProps {
    card: D.Card;
    dispatch: Function;
}


export class CardComponent extends React.Component<CardProps, any> {
    render() {
        return div(null,
            p(null, this.props.card.name),
            button(null, "Delete")
        );
    }
}

const Card = React.createFactory(CardComponent);
export default Card;

开发者ID:Keats，项目名称:react-ts-boilerplate，代码行数:25，代码来源:card.ts

示例6: express

const port: number = isProduction ? process.env.PORT : 3000;

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，代码行数:31，代码来源:app.ts

示例7: require

/// <reference path="./types/common.d.ts" />

require('bootstrap.css');
require('./css/custom.css');
var React = require('react');

Object['assign'] = require('object-assign');

var Main = React.createFactory(require('./js/Main'));

var initReact = function () {
    React.render(Main(), document.getElementById('root'));
};

window.onload = () => {
    initReact();
};

开发者ID:teoreteetik，项目名称:aesop，代码行数:17，代码来源:main.ts

示例8: createFactory

import { ServerResponse } from 'http';
import { createFactory } from 'react';
import { renderToNodeStream } from 'react-dom/server';

import IndexPage from '../pages/index';
import ResultPage from '../pages/result';
import NotFoundPage from '../pages/404';
import ServerErrorPage from '../pages/500';

const IndexFactory = createFactory(IndexPage);
const ResultFactory = createFactory(ResultPage);
const NotFoundFactory = createFactory(NotFoundPage);
const ServerErrorFactory = createFactory(ServerErrorPage);

import { getResultProps } from '../page-props/results';

import { containerId, pages, hostname } from '../util/constants';
import OctocatCorner from '../components/OctocatCorner';

const existingPaths = new Set(Object.values(pages));
const logoSize = 108;
const title = 'Package Phobia';
const description = 'Find the cost of installing a node dependency';
const css = `
body {
    margin: 0;
    padding: 0;
    background: #fafafa;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;    
}

开发者ID:sumbach，项目名称:packagephobia，代码行数:30，代码来源:_document.ts

示例9: render

import * as React from "react";
let { div, button } = React.DOM;
import { connect } from "react-redux";

import * as D from "../definitions";
import Board from "./board";


interface BoardAppProps {
    boards: D.BoardsState;
    dispatch: Function;
}

@connect((state: any) => ({
    boards: state.boards
}))
export class BoardAppComponent extends React.Component<BoardAppProps, any> {
    render() {
        return div(null, ...this.renderBoards());
    }

    renderBoards(): Array<React.ReactElement<any>> {
        return Object.keys(this.props.boards).map((key) => {
            return Board({board: this.props.boards[key]});
        });
    }
}

const BoardApp = React.createFactory(BoardAppComponent);
export default BoardApp;

开发者ID:Keats，项目名称:react-ts-boilerplate，代码行数:30，代码来源:boardApp.ts

示例10: createFactory

import { createFactory, HTMLFactory, SVGFactory } from 'react';

export const button = createFactory('button') as HTMLFactory<HTMLButtonElement>;
export const canvas = createFactory('canvas') as HTMLFactory<HTMLCanvasElement>;
export const div = createFactory('div');
export const form = createFactory('form') as HTMLFactory<HTMLFormElement>;
export const img = createFactory('img') as HTMLFactory<HTMLImageElement>;
export const input = createFactory('input') as HTMLFactory<HTMLInputElement>;
export const svg = createFactory('svg') as SVGFactory;

开发者ID:robertknight，项目名称:passcards，代码行数:9，代码来源:dom_factory.ts

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