TypeScript react.createElement函数代码示例

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

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

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

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

示例1: 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

示例2: render

            public render() {
                const mp = this.props.MP;
                const scores = [];
                let i = 0;

                for (i = 0; i < this.props.lobby.names.length; i = i + 1) {
                    scores.push(React.createElement(RockScissorsPaperRule.views['score'], {
                        name: this.props.lobby.names[i],
                        win: this.props.win[i],
                        draw: this.props.draw[i],
                        lose: this.props.lose[i]
                    }));
                }
                return mp.getPluginView('gameshell',
                                        'HostShell-Main',
                                        {
                                            'links': {
                                                'home': {
                                                    'icon': 'gamepad',
                                                    'label': 'Game',
                                                    'view': React.DOM.table(
                                                        null,
                                                        React.DOM.thead(null,
                                                                        React.createElement(
                                                                            RockScissorsPaperRule.views['scoreHeader'],
                                                                            {})),
                                                        React.DOM.tbody(null,
                                                                        scores))
                                                },
                                                'clients': {
                                                    'icon': 'users',
                                                    'label': 'Players',
                                                    'view': mp.getPluginView('lobby', 'host-roommanagement')
                                                }
                                            }
                                        });

            }

开发者ID:zichun，项目名称:multiplayr，代码行数:38，代码来源:rockscissorspaper.ts

示例3: execute

    async execute(event: InitShopEvent) : Promise<void> {
        if (event.args[1]) {
            switch (event.args[1]) {
                case "filter":
                    event.view = React.createElement(Shop, {
                        childs: React.createElement(ShopFilter, {model: this.store.data.shop}),
                        model: this.store.data.shop
                    });
                    event.callBack();
                    return;

                default:
                    if (!this.store.data.shop.selectedItem || this.store.data.shop.selectedItem.id !== event.args[1]) {
                        new GetShopItemsDetailsEvent(event.args[1]).dispatch();
                        return;
                    }

                    event.view = React.createElement(Shop, {
                        childs: React.createElement(ShopItem, {model: this.store.data.shop}),
                        model: this.store.data.shop
                    });

                    event.callBack();
                    return;
            }
        } else {
            event.view = React.createElement(Shop, {model: this.store.data.shop});
        }

        if (!this.store.data.shop.init) {
            event.callBack();
            new GetShopItemsEvent().dispatch();
            this.store.set("shop.init", true);
            return;
        }

        event.callBack();
    }

开发者ID:joergwasmeier，项目名称:lingua，代码行数:38，代码来源:InitShopCommand.ts

示例4: onRenderCell

  @override
  public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    // Use this method to perform your custom cell rendering.  The CellFormatter is a utility
    // that you can use to convert the cellValue to a text string.
    const value: string = event.cellValue;
    const id: string = event.row.getValueByName('ID').toString();
    const hasPermissions: boolean = this.context.pageContext.list.permissions.hasPermission(SPPermission.editListItems);

    const toggle: React.ReactElement<{}> =
      React.createElement(Toggle, { checked: value, id: id, disabled: !hasPermissions, onChanged: this.onToggleValueChanged.bind(this) } as IToggleProps);

    ReactDOM.render(toggle, event.cellDiv);

  }

开发者ID:AdrianDiaz81，项目名称:sp-dev-fx-extensions，代码行数:14，代码来源:ToggleFieldCustomizer.ts

示例5: test

 test("can add font and background color classes", () => {
   const el = shallow(
     React.createElement(
       Ansi,
       { useClasses: true },
       `hello ${GREEN_FG}${YELLOW_BG}world`
     )
   );
   expect(el).not.toBeNull();
   expect(el.text()).toBe("hello world");
   expect(el.html()).toBe(
     "<code><span>hello </span><span class=\"ansi-yellow ansi-green\">world</span></code>"
   );
 });

开发者ID:nteract，项目名称:nteract，代码行数:14，代码来源:index.spec.ts

示例6: render

  public render(): void {
    const element: React.ReactElement<IDropdownWithRemoteDataProps > = React.createElement(
      DropdownWithRemoteData,
      {
        list: this.properties.list,
        item: this.properties.item,
        needsConfiguration: this.needsConfiguration(),
        displayMode: this.displayMode,
        configureWebPart: this.configureWebPart
      }
    );

    ReactDom.render(element, this.domElement);
  }

开发者ID:，项目名称:，代码行数:14，代码来源:

示例7: render

 public render() {
     return React.createElement('div', {
         id: 'actionTimelinePopup',
         className: 'actionPopup',
         style: {
             left: this.state.left,
             top: this.state.top
         }
     } as React.DOMAttributes,
         React.createElement('div', {
             className: 'actionPopupTitle'
         } as React.DOMAttributes, this.state.title),
         React.createElement('button', {
             className: 'removeFromTasklineButton',
             onClick: this.removeFromTaskline.bind(this)
         } as React.DOMAttributes, 'Remove from taskline'),
         React.createElement('button', {
             className: 'addToCalloutsButton',
             id: 'addToCalloutsButton',
             onClick: this.addToCallouts.bind(this)
         } as React.DOMAttributes, 'Display as callout')
     );
 }

开发者ID:ConstYavorskiy，项目名称:HeractJS，代码行数:23，代码来源:ActionTasklinePopup.ts

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