Typescript和ReactJS —定义和备忘单

时间:2018-10-24 13:24:02

标签: reactjs typescript styled-components react-props

我需要帮助在Typescript的代码中定义一些元素。我对TS的经验为零,如果有人可以为刚开始的人共享资源,我将不胜感激。假人备忘单很棒。

谢谢。

在下面的代码中,我不确定如何定义以下内容:

  • onChange
  • 孩子
  • child。props。value

代码

import * as React from 'react'
import styled from 'styled-components'

const TabListWrapper = styled.ul`
    display: flex;
    flex-direction: row;
    list-style-type: none;
`

interface Props {
    defaultValue: string
}

export default class TabList extends React.Component<Props> {
    state = {
        value: this.props.defaultValue,
    }

    select(value) {
        this.setState({ value }, () => {
            this.props.onChange(this.state.value)
        })
    }

    render() {
        const children = React.Children.map(this.props.children, child =>
            React.cloneElement(child, {
                isSelected: child.props.value === this.state.value,
                onClick: () => this.select(child.props.value),
            }),
        )

        return <TabListWrapper>{children}</TabListWrapper>
    }
}

0 个答案:

没有答案