本文整理匯總了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>
`);
}示例2: render
render() {
return React.jsx(`
<div>
<Header />
<MainSection
allTodos={this.state.allTodos}
areAllComplete={this.state.areAllComplete}
/>
<Footer allTodos={this.state.allTodos} />
</div>
`);
}示例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>
`);
}示例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>
`);
}示例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>
`);
}示例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>
`);
}示例7:
let todos = keys.map((key) =>
React.jsx(` <TodoItem key={key} todo={allTodos[key]} /> `));示例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")
);
示例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")
);