TypeScript react.createClass函數代碼示例

  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>'
    )
  })

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

        }
    }
};

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 {

/// <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;

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);
  },
});

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