本文整理汇总了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({}) });
}示例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')
}
});
});示例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;示例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);
//示例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;
示例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);
});示例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();
};
示例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;
}
示例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;
示例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;