TypeScript react-markup.h函数代码示例

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

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

本文整理汇总了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')
  }
}

开发者ID:SMartinScottLogic，项目名称:queue-manager，代码行数:9，代码来源:queue_entry.ts

示例2: QueueEntry

export function QueueEntry(props: QueueEntryProp) {
  const { todo } = props

  if (todo.isDone) {
    return h('strike', todo.text)
  } else {
    return h('span', todo.text)
  }
}

开发者ID:SMartinScottLogic，项目名称:queue-manager，代码行数:9，代码来源:queue_entry.ts

示例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())
        )
    }

开发者ID:SMartinScottLogic，项目名称:queue-manager，代码行数:57，代码来源:queue_list.ts

示例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'))
        )
    )

开发者ID:SMartinScottLogic，项目名称:queue-manager，代码行数:10，代码来源:queue.ts

示例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 })
                        )
                    )
                )
            }

开发者ID:SMartinScottLogic，项目名称:queue-manager，代码行数:13，代码来源:queue_list.ts

示例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')
)

开发者ID:SMartinScottLogic，项目名称:queue-manager，代码行数:31，代码来源:queue.ts

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