TypeScript addons.createElement函数代码示例

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

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

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

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

示例1: String

      rows = rowData.map((d) => {
        var segmentValue = d[dimensionName];
        var segmentValueStr = String(segmentValue);
        var measureValue = d[measureName];
        var measureValueStr = formatter(measureValue);
        var selected = highlightSet && highlightSet.contains(segmentValue);

        var checkbox: React.ReactElement<any> = null;
        if (false) {
          checkbox = React.createElement(Checkbox, {
            checked: selected
            //onClick: this.onBoxClick.bind(this, segmentValue)
          });
        }

        var className = 'row';
        if (highlightSet) className += ' ' + (selected ? 'selected' : 'not-selected');
        var row = JSX(`
          <div
            className={className}
            key={segmentValueStr}
            onClick={this.onRowClick.bind(this, segmentValue)}
          >
            <div className="segment-value" title={segmentValue}>
              {checkbox}
              <div className="label" title={segmentValueStr}>{segmentValueStr}</div>
            </div>
            <div className="measure-value">{measureValueStr}</div>
            {selected ? highlightControls : null}
          </div>
        `);
        if (selected && highlightControls) highlightControls = null; // place only once
        return row;
      });

开发者ID:Ghostubborn，项目名称:pivot，代码行数:34，代码来源:dimension-tile.ts

示例2: render

  render() {
    var { checked, onClick } = this.props;

    var check: React.ReactElement<any> = null;
    if (checked) {
      check = React.createElement(Icon, {
        name: "check",
        height: CHECKBOX_SIZE
      });
    }

    return JSX(`
      <div className={'checkbox' + (checked ? ' checked' : '')} onClick={onClick}>{check}</div>
    `);
  }

开发者ID:Ghostubborn，项目名称:pivot，代码行数:15，代码来源:checkbox.ts

示例3: String

    var lines = ticks.map((tick: any) => {
      var lineProps: any = {
        key: String(tick)
      };

      if (orientation === 'horizontal') {
        var y = scale(tick);
        lineProps.x1 = 0;
        lineProps.x2 = stage.width;
        lineProps.y1 = y;
        lineProps.y2 = y;
      } else {
        var x = scale(tick);
        lineProps.x1 = x;
        lineProps.x2 = x;
        lineProps.y1 = 0;
        lineProps.y2 = stage.height;
      }

      return React.createElement('line', lineProps);
    });

开发者ID:Ghostubborn，项目名称:pivot，代码行数:21，代码来源:grid-lines.ts

示例4: String

      rows = rowData.map((d) => {
        var segmentValue = String(d[dimensionName]);
        var measureValue = d[measureName];
        var measureValueStr = formatter(measureValue);
        var selected = selectedValues && selectedValues.includes(segmentValue);

        var checkbox: React.ReactElement<any> = null;
        if (showCheckboxes) {
          checkbox = React.createElement(Checkbox, {
            checked: selected
          });
        }

        return JSX(`
          <div className={'row' + (selected ? ' selected' : '')} key={segmentValue}>
            <div className="segment-value" onClick={onValueClick.bind(this, segmentValue)}>
              {checkbox}
              <div className="label">{segmentValue}</div>
            </div>
            <div className="measure-value">{measureValueStr}</div>
          </div>
        `);
      });

开发者ID:Ghostubborn，项目名称:pivot，代码行数:23，代码来源:menu-table.ts

示例5: render

  render() {
    var { clicker, essence, dimension } = this.props;
    var { loading, dataset, error, showSearch } = this.state;
    var { dataSource, filter } = essence;
    var measure = dataSource.getSortMeasure(dimension);

    var dimensionName = dimension.name;
    var measureName = measure.name;

    var maxHeight = PIN_TITLE_HEIGHT;

    var searchBar: React.DOMElement<any> = null;
    if (showSearch) {
      searchBar = JSX(`<div className="search-box"><input type="text" placeholder="Search"/></div>`);
      maxHeight += SEARCH_BOX_HEIGHT;
    }

    var rows: Array<React.DOMElement<any>> = [];
    var highlightControls: React.ReactElement<any> = null;
    var hasMore = false;
    if (dataset) {
      var highlightId = HIGHLIGHT_ID + dimension.name;
      var highlightSet: Set = null;
      if (essence.highlightOn(highlightId)) {
        highlightSet = essence.getSingleHighlightValue();
        highlightControls = React.createElement(HighlightControls, {
          clicker,
          orientation: 'horizontal'
        });
      }

      hasMore = dataset.data.length > TOP_N;
      var rowData = dataset.data.slice(0, TOP_N);
      var formatter = formatterFromData(rowData.map(d => d[measureName]), measure.format);
      rows = rowData.map((d) => {
        var segmentValue = d[dimensionName];
        var segmentValueStr = String(segmentValue);
        var measureValue = d[measureName];
        var measureValueStr = formatter(measureValue);
        var selected = highlightSet && highlightSet.contains(segmentValue);

        var checkbox: React.ReactElement<any> = null;
        if (false) {
          checkbox = React.createElement(Checkbox, {
            checked: selected
            //onClick: this.onBoxClick.bind(this, segmentValue)
          });
        }

        var className = 'row';
        if (highlightSet) className += ' ' + (selected ? 'selected' : 'not-selected');
        var row = JSX(`
          <div
            className={className}
            key={segmentValueStr}
            onClick={this.onRowClick.bind(this, segmentValue)}
          >
            <div className="segment-value" title={segmentValue}>
              {checkbox}
              <div className="label" title={segmentValueStr}>{segmentValueStr}</div>
            </div>
            <div className="measure-value">{measureValueStr}</div>
            {selected ? highlightControls : null}
          </div>
        `);
        if (selected && highlightControls) highlightControls = null; // place only once
        return row;
      });
      maxHeight += Math.max(3, rows.length) * PIN_ITEM_HEIGHT;
    }

    var loader: React.ReactElement<any> = null;
    if (loading) {
      loader = React.createElement(Loader, null);
    }

    var queryError: React.ReactElement<any> = null;
    if (error) {
      queryError = React.createElement(QueryError, { error });
    }

    maxHeight += PIN_PADDING_BOTTOM;

    const className = [
      'dimension-tile',
      (showSearch ? 'with-search' : 'no-search')
    ].join(' ');

    const style = {
      maxHeight
    };

    // onSearch={this.toggleSearch.bind(this)}
    return JSX(`
      <div className={className} style={style}>
        <TileHeader
          title={dimension.title}
          onDragStart={this.onDragStart.bind(this)}
          onClose={clicker.unpin.bind(clicker, dimension)}
        />
//.........这里部分代码省略.........

开发者ID:Ghostubborn，项目名称:pivot，代码行数:101，代码来源:dimension-tile.ts

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