npm create vite@latest my-vue-app -- --template react-ts
useState && TS
props && TS
axios & TS
props的两种定义
//1
interface IProps {
name: string
}
const App: React.FC<IProps> = (props) => {
const {name} = props;
return (
<div className="App">
<h1>hello world</h1>
<h2>{name}</h2>
</div>
);
}
export default App;
//2
interface IProps {
name: string
}
const HelloFunction = (props: IProps) => {
const {name} = props;
return (
<div className="App">
<h1>hello world</h1>
<h2>{name}</h2>
</div>
);
}
export default HelloFunction;
props接受插槽
import Child1 from "../childFunction/child1";
import Child2 from "../childFunction/child2";
interface IProps {
name: string;
}
const Parent: React.FC<IProps> = (props) => {
const { name } = props;
return (
<Child1 name={name}>
<Child2 name={name} />
my test content
</Child1>
);
};
export default Parent;
interface IProps {
name: string;
}
const Child1: React.FC<React.PropsWithChildren<IProps>> = (props) => {
const { name, children } = props;
console.log(children);
return (
<div className="App">
<h1>hello child1</h1>
<h2>{name}</h2>
</div>
);
};
export default Child1;