TODO

    https://www.v2ex.com/t/706395
    image.png

    基础组件 Example
    接受两个参数

    1. type Props = {
    2.   initNum: string
    3.   val: number
    4. }
    6. export const Example: React.FC<Props> = para => {
    7.   // 声明一个新的叫做 “count” 的 state 变量
    8.   const [count, setCount] = useState(para.initNum);
    9.   return (
    10.     <div>
    11.       <p>You clicked {count} times</p>
    12.       <button onClick={() => setCount(count + 1)}>
    13.         Click me
    14.       </button>
    15.       <Example2 val={para.val} />
    16.     </div>
    17.   );
    18. }

    子组件 Example2
    接受一个参数val，类型为number

    1. export const Example2: React.FC<{ val: number }> = para => {
    2.   // 声明一个新的叫做 “count” 的 state 变量  
    3.   const [count, setCount] = useState(para.val);
    4.   return (
    5.     <div>
    6.       <p>You clicked {count} times</p>
    7.       <button onClick={() => setCount(count + 1)}>
    8.         Click me
    9.       </button>
    11.     </div>
    12.   );
    13. }

    外部调用，直接填写参数名，number类型使用中括号包裹

    1. function App() {
    2.   return (
    3.     <div className="App">
    4.       <Example initNum="55" val={10} />
    5.       < header className="App-header">
    6.         <img src={logo} className="App-logo" alt="logo" />
    7.         <p>
    8.           Edit <code>src/App.tsx</code> and save to reload.
    9.         </p>
    10.         <a
    11.           className="App-link"
    12.           href="https://reactjs.org"
    13.           target="_blank"
    14.           rel="noopener noreferrer"
    15.         >
    16.           Learn React
    17.         </a>
    18.       </header>
    19.     </div>
    20.   );
    21. }
    23. export default App;