TypeScript react.createClass函数代码示例

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

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

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

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

示例1: it

  it('should work with children', function () {
    const ChildStyle = create()

    const APP_STYLE = Style.registerStyle({
      color: 'blue'
    })

    const BUTTON_STYLE = ChildStyle.registerStyle({
      backgroundColor: 'red'
    })

    const Button = ChildStyle.component(React.createClass({

      render: function () {
        return React.createElement(
          'button',
          { className: BUTTON_STYLE },
          'Hello world!'
        )
      }

    }))

    const Child = ChildStyle.component(React.createClass({

      render: function () {
        return React.createElement(
          'div',
          null,
          React.createElement(Button)
        )
      }

    }))

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

      render: function () {
        return React.createElement(
          'div',
          { className: APP_STYLE },
          React.createElement(Child),
          React.createElement(Style.Element)
        )
      }

    }))

    expect(renderToStaticMarkup(React.createElement(App))).to.equal(
      '<div class="' + APP_STYLE + '">' +
      '<div>' +
      '<button class="' + BUTTON_STYLE + '">Hello world!</button>' +
      '</div>' +
      '<style>.' + APP_STYLE + '{color:blue}.' + BUTTON_STYLE + '{background-color:red}</style>' +
      '</div>'
    )
  })

开发者ID:agrady42，项目名称:react-free-style，代码行数:57，代码来源:react-free-style.spec.ts

示例2: jsnox

import * as React from "react";
import * as jsnox from "jsnox";
const $ = jsnox(React);

interface PersonProps {
    firstName: string;
    lastName: string;
    age: number;
}

const Person: React.ClassicComponentClass<PersonProps> = React.createClass<PersonProps, {}>({
    render(): React.ReactElement<any> { return null; }
});

const PersonTag = React.createFactory(Person);

declare const clickHandler: React.MouseEventHandler<{}>;

// tests with spec string
function spec_string(): void {
    let result: React.DOMElement<React.DOMAttributes<Element>, Element>;

    // just spec string
    result = $("div");

    // no properties, just children
    result = $("div", "hello"); // one string child
    result = $("div", $("span", "world")); // one element child
    result = $("div", ["hello", $("span", "world")]); // mixed array of children

    // with html properties

开发者ID:DenisCarriere，项目名称:DefinitelyTyped，代码行数:31，代码来源:jsnox-tests.ts

示例3: function

        }
    }
};

var MetaChoiceContainer = React.createClass({
    mixins: [RemovableContainerMixin],
    doUpdate: function () : void {
        $(this.props.backing).text($(this.refs.select.getDOMNode()).val());
    },
    render: function () : void {
        var options = this.props.options.map(
            (v : string) : any => {
                return React.DOM.option({value: v, key: v}, v);
            });
        return D.div({},
                     D.span({ onMouseUp: this.handleNameClick }, this.props.name),
                     ": ",
                     React.DOM.select({ ref: "select",
                                        onChange: this.doUpdate,
                                        defaultValue:
                                        this.props.backing.textContent,
                                        id: this.props.parent.getName() + "-" +
                                        this.props.name
                                      },
                                      options));
    }
});

var MetaBoolContainer = React.createClass({
    mixins: [RemovableContainerMixin],
    doUpdate: function () : void {

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

示例4: require

/// <reference path='../typings/tsd.d.ts' />
var React = require('react');
var Griddle = require('griddle-react');
var fakeData = require('./data/fakeData.js').fakeData;  

var Table = React.createClass({
    render() {
        return <div id="table"> 
                <Griddle 
                    results={fakeData} 
                    showSettings={true}
                    showFilter={true}
                />
            </div>
    }
});

export = Table;

开发者ID:rzh，项目名称:typed_and_reacted，代码行数:18，代码来源:Table.ts

示例5: componentWillMount

const SplitReducer = React.createClass({
  propTypes: {
    location: React.PropTypes.object,
    children: React.PropTypes.element,
    routes: React.PropTypes.array,
  },
  contextTypes: {
    store: React.PropTypes.object,
  },

  componentWillMount() {
    this.updateReducerFromComponents();
  },

  componentWillReceiveProps(nextProps: any) {
    this.updateReducerFromComponents();
  },

  updateReducerFromComponents() {
    const {   routes } = this.props;
    this.props.router.listen((location) => {
      match({ location, routes }, (error, redirectLocation, renderProps) => {
        findAndReplaceReducerFromComponents(renderProps.components, this.context.store);
      });
    });

  },

  render() {
    return React.Children.only(this.props.children);
  },
});

开发者ID:ArtemGovorov，项目名称:reactjs-hackathon-kit，代码行数:32，代码来源:SplitReducer.ts

示例6: jsnox

import * as React from 'react';
import * as jsnox from 'jsnox';
var $ = jsnox(React);

interface PersonProps {
    firstName: string
    lastName: string
    age: number
}

var Person = React.createClass<PersonProps, {}>({
    render():React.ReactElement<any> { return null; }
});

var PersonTag = React.createFactory(Person);

var clickHandler: React.MouseEventHandler<{}>;

// Tests with spec string
function spec_string () {
    var result: React.ReactHTMLElement<HTMLElement>

    // just spec string
    result = $('div')

    // No properties, just children
    result = $('div', 'hello') // one string child
    result = $('div', $('span', 'world')) // one element child
    result = $('div', ['hello', $('span', 'world')]) // mixed array of children

开发者ID:isman-usoh，项目名称:DefinitelyTyped，代码行数:29，代码来源:jsnox-tests.ts

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