storybook

src/components/ts-test/index.tsx

-import React, {Component} from 'react';
-import {V} from 'src/common/course-card'
+import React, {Component, useState, useEffect, useLayoutEffect, useRef} from 'react';
 import {withRouter, RouteComponentProps} from 'react-router-dom'
 
-class TSTest extends Component<RouteComponentProps> {
-    componentDidMount() {
+const TSTest: React.FC = () => {
+    const [count, setCount] = useState(0);
 
+    function handleAlertClick() {
+        setTimeout(() => {
+            alert('You clicked on: ' + count);
+        }, 3000);
     }
 
-    render() {
     return (
-            <div className={'ts-test'}>
-                TS
-                <V title={'a'} status={2} courseId={2}
-                   history={this.props.history}
-                   image={'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg'}></V>
+        <div>
+            <p>You clicked {count} times</p>
+            <button onClick={() => setCount(count + 1)}>
+                Click me
+            </button>
+            <button onClick={handleAlertClick}>
+                Show alert
+            </button>
         </div>
     );
-    }
+}
+
+function Message({text}: { text: string }) {
+    const [message, setMessage] = useState<string | null>(null)
+
+    useEffect(() => {
+        setMessage(text)
+    })
+
+    return <span>{message}</span>
 }
 
 export default withRouter(TSTest);
\ No newline at end of file