TypeScript react.jsx函数代码示例

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

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

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

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

示例1: render

  render() {
    return React.jsx(`

        <div>
          <h1>Count: {this.state.count}</h1>
          <button onClick={this._handleInc} >Increment</button>
          <button onClick={this._handleClear} >Clear</button>
        </div>

      `);
  }

开发者ID:Shearerbeard，项目名称:react-alt-typescript-boilderplate，代码行数:11，代码来源:Main.ts

示例2: render

 render() {
   return React.jsx(`
     <div>
       <Header />
       <MainSection
         allTodos={this.state.allTodos}
         areAllComplete={this.state.areAllComplete}
       />
       <Footer allTodos={this.state.allTodos} />
     </div>
   `);
 }

开发者ID:Shearerbeard，项目名称:alt-typescript-todomvc，代码行数:12，代码来源:TodoApp.ts

示例3: render

  render() {
    let todo = this.props.todo;

    var input;
    if(this.state.isEditing) {
      input = React.jsx(`

          <TodoTextInput
            className="edit"
            onSave={this._onSave}
            value={todo.text} />

      `);
    }

    return React.jsx(`

        <li
         className={cx({
           'completed': todo.complete,
           'editing': this.state.isEditing
         })}
         key={todo.id}>
         <div className="view">
           <input
             className="toggle"
             type="checkbox"
             checked={todo.complete}
             onChange={this._onToggleComplete}
           />
           <label onDoubleClick={this._onDoubleClick}>
             {todo.text}
           </label>
           <button className="destroy" onClick={this._onDestroyClick} />
         </div>
         {input}
       </li>

    `);
  }

开发者ID:Shearerbeard，项目名称:alt-typescript-todomvc，代码行数:40，代码来源:TodoItem.ts

示例4: render

  render() {
    return React.jsx(`

      <header id="header">
        <h1>todos</h1>
        <TodoTextInput
          id="new-todo"
          placeholder="What needs to be done?"
          onSave={this._onSave} />
      </header>

    `);
  }

开发者ID:Shearerbeard，项目名称:alt-typescript-todomvc，代码行数:13，代码来源:Header.ts

示例5: render

  render() {
    let allTodos = this.props.allTodos;
    let todoKeys = Object.keys(allTodos);
    let total = todoKeys.length;

    if(total === 0) return null;

    let completed = todoKeys.filter(key => allTodos[key].complete).length;

    let itemsLeft = total - completed;
    let itemsLeftPhrase = ` ${itemsLeft === 1? 'item' : 'items'} left`;

    let clearCompletedButton = (completed)?
      React.jsx(`

          <button
            id="clear-completed"
            onClick={this._onClearCompletedClick}>
            Clear completed ({completed})
          </button>

        `) : undefined;

    return React.jsx(`

          <footer id="footer">
            <span id="todo-count">
              <strong>
                {itemsLeft}
              </strong>
              {itemsLeftPhrase}
            </span>
            {clearCompletedButton}
          </footer>

      `);

  }

开发者ID:Shearerbeard，项目名称:alt-typescript-todomvc，代码行数:38，代码来源:Footer.ts

示例6: render

  render() {

    let keys = Object.keys(this.props.allTodos);

    if (keys.length < 1) return null;

    var allTodos = this.props.allTodos;
    let todos = keys.map((key) =>
      React.jsx(` <TodoItem key={key} todo={allTodos[key]} /> `));

    return React.jsx(`

      <section id="main">
        <input
          id="toggle-all"
          type="checkbox"
          onChange={this._onToggleCompleteAll}
          checked={this.props.areAllComplete ? 'checked' : ''} />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">{todos}</ul>
      </section>

    `);
   }

开发者ID:Shearerbeard，项目名称:alt-typescript-todomvc，代码行数:24，代码来源:MainSection.ts

示例7:

 let todos = keys.map((key) =>
   React.jsx(` <TodoItem key={key} todo={allTodos[key]} /> `));

开发者ID:Shearerbeard，项目名称:alt-typescript-todomvc，代码行数:2，代码来源:MainSection.ts

示例8:

/**
 * Created by shearerbeard on 6/16/15.
 */

///<reference path="../typings/references.d.ts"/>

import * as React from "react";
import {alt} from "./alt";
import {MainComponent} from "./components/Main";

React.render(
    React.jsx(`<MainComponent />`),
    document.getElementById("app")
);

开发者ID:Shearerbeard，项目名称:react-alt-typescript-boilderplate，代码行数:14，代码来源:app.ts

示例9:

/**
 * Created by shearerbeard on 6/16/15.
 */

///<reference path="../typings/references.d.ts"/>

import * as React from "react";
import {alt} from "./alt";
import {Locations} from "./components/Locations";

React.render(
    React.jsx(`<Locations />`),
    document.getElementById("app")
);

开发者ID:Shearerbeard，项目名称:alt-typescript-tutorial，代码行数:14，代码来源:app.ts

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