markdown 打字稿tsx

Posted 2021-05-05

[cheat sheet](https://github.com/sw-yx/react-typescript-cheatsheet/blob/master/README.md)

# Functional Component
```tsx
const MobxWrapper: React.FunctionComponent<{ children: any }> = ({ children }) => {
  return (<div>
    <Provider {...stores}>
      <div>
        <DevTools />
        {children}
      </div>
    </Provider>
  </div>)
}
```

# Stateful Component
```tsx
import React from 'react'

interface IProps {
  text: string;
  age?: number;
}

interface IState {
  email: string;
  name: string;
}

export default class Form extends React.Component<IProps, IState>{

  state = {
    email: "",
    name: ""
  }

  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    this.setState({
      name: value
    });
  }

  render() {
    const { text } = this.props
    const { name } = this.state
    return (
      <div>
        <div>{text}</div>
        <input name="name" value={name} onChange={this.handleChange} />
      </div>
    )
  }
}
```