reat中TS函数式组件的写法

ICPunk

已于 2022-06-25 17:37:09 修改

阅读量996

点赞数

分类专栏： react 文章标签： typescript javascript 前端

于 2022-06-25 17:36:37 首次发布

本文链接：https://blog.csdn.net/xinzaitt/article/details/125462139

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文探讨了React中useState和useRef Hooks的使用，以及如何在组件间传递数据和触发事件。通过示例展示了如何利用隐式类型推断和泛型来增强类型安全性。同时，文章还讲解了如何创建和控制抽屉式组件的显示隐藏，以及相关接口定义和事件处理。

摘要由CSDN通过智能技术生成

state

const [name, setName] = useState("aaa");
name.substring(0, 1).toUpperCase() + name.substring(1);
setName("bbb"); // 这里利用了隐式类型推断
// 要么就显示泛型指定
const [name, setName] = useState<string>("aaa");

todo
const myText = useRef(null)
console.log((myText.current as HTMLInputElement).value)
const [list, setList] = useState([])
setList([…list, (myText.current as HTMLInputElement).value])
props

<Child name="aaa" />;
interface IProps {
  name: string;
}
function Child(props: IProps) {
  return <div>child</div>;
}
// 或者
const Child: React.FC<IProps> = (props) => {};

drawer

//
const [isShow, setIsShow] = useState(true)
<Navbar cb={()=>{
    console.log("111")
    setIsShow(!isShow)
}}/>
{isShow && <Sidebar />}
interface IProps {
    title?: string,
    cb: ()=>void
}
function Navbar(props: IProps) {
    props.cb()
}
function Sidebar(props: IProps) {

}