本文整理匯總了TypeScript中react-markup.h函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript h函數的具體用法？TypeScript h怎麽用？TypeScript h使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了h函數的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: QueueEntry2
export function QueueEntry2(props: QueueEntryProp) {
const { todo } = props
if (todo.isDone) {
return h('strike', h('span', { dangerouslySetInnerHTML: rawMarkup(todo.text) }), 'strike')
} else {
return h('span', h('span', { dangerouslySetInnerHTML: rawMarkup(todo.text) }), 'span')
}
}示例2: QueueEntry
export function QueueEntry(props: QueueEntryProp) {
const { todo } = props
if (todo.isDone) {
return h('strike', todo.text)
} else {
return h('span', todo.text)
}
}示例3: QueueList
return function QueueList(props: { todos: Map<{}, {}>, toggleTodo: Function, deleteTodo: Function, addTodo: Function, setMode: Function }) {
const { todos, toggleTodo, deleteTodo, addTodo, setMode }: { todos: Map<{}, {}>, toggleTodo: Function, deleteTodo: Function, addTodo: Function, setMode: Function } = props
const onSubmit = (event: Event & any) => {
console.log(event)
const input = event.target
const text = input.value
const isEnterKey = (event.which === 13)
const isLongEnough = text.length > 0
if (isEnterKey && isLongEnough) {
input.value = ''
addTodo(text)
}
}
const toggleClick = (id: number) => (event: Event) => toggleTodo(id)
const handleTap = (id: number) => (event: any) => {
console.log('tap', id, event)
toggleTodo(id)
}
/*
const handleSwipe = (id: number) => (event: any) => {
console.log('swipe', id, event)
deleteTodo(id)
}
*/
const handlePan = (id: number) => (event: any) => {
console.log('pan', id, event)
let mode = 0
let pos = event.deltaX
if (event.type === 'panend') {
pos = 0
mode = 1
}
setMode(id, mode, pos)
}
return h('div.todo',
h('input', { type: 'text', placeholder: 'Add todo', onKeyDown: onSubmit }),
h('ul.todo__list', todos.take(5).map((t: any) => {
const todo = t.toJS()
console.log('todo', todo)
return h(Hammer, { key: todo.id, onTap: handleTap(todo.id), /*onSwipe: handleSwipe(todo.id), */onPan: handlePan(todo.id), onPanEnd: handlePan(todo.id) },
h('li.todo__item', { style: { background: todo.mode === 0 ? 'red' : 'transparent' } },
// { key: todo.id/*, onClick: toggleClick(todo.id)*/ },
h('span.card', {style: { transform: `translate3d(${todo.pos}px, 0, 0)`}},
h(T, { todo })
)
)
)
}
).toArray())
)
}示例4: h
const Test = () =>
h('div.hello',
h('h1', 'Test Page'),
h('h2', 'Test content'),
h('ul',
h('li', h(ReactRouter.Link, { to: '/' }, 'main')),
h('li', h(ReactRouter.Link, { to: 'b' }, 'b')),
h('li', h(ReactRouter.Link, { to: 'test/a/b/c' }, 'deeper page'))
)
)示例5: h
h('ul.todo__list', todos.take(5).map((t: any) => {
const todo = t.toJS()
console.log('todo', todo)
return h(Hammer, { key: todo.id, onTap: handleTap(todo.id), /*onSwipe: handleSwipe(todo.id), */onPan: handlePan(todo.id), onPanEnd: handlePan(todo.id) },
h('li.todo__item', { style: { background: todo.mode === 0 ? 'red' : 'transparent' } },
// { key: todo.id/*, onClick: toggleClick(todo.id)*/ },
h('span.card', {style: { transform: `translate3d(${todo.pos}px, 0, 0)`}},
h(T, { todo })
)
)
)
}示例6: render
Store.subscribe(() => {
console.log(Store.queue)
})
}
render() {
return (
h('div', Store.queue.map((entry) => h(Entry,
{
key: entry.id,
id: entry.id,
checked: entry.checked || false,
onCheckChange: (id: number) => handleCheckChange(id),
text: `${entry.text}`
}
))
)
)
}
}
ReactDOM.render(
h('div',
h(ReactRouter.Router, { history: ReactRouter.browserHistory },
h(ReactRouter.Route, { path: '/', component: Main }),
h(ReactRouter.Route, { path: '/test', component: Test })
)
, h(QueueList)
),
document.getElementById('content')
)