(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

在前面幾篇中，當我們使用React component時，多半是這樣使用的:

<元素名稱/>

然而在一開始的時候，我們提到過像這樣的使用方法也是可以的:

<元素名稱> (其他的東西) </元素名稱>

在以前使用純html語法時，我們也常常用這樣巢狀的方式包住多個元素。那麼我們要怎麼在自製元素中使用包在中間的「其他東西」呢?
在react component中，我們把包在標籤中間的東西，稱為children。

children的使用

children是props之一，所以當使用的children改變時，畫面也會重繪。接續上一篇的程式碼來練習使用children。原本我們在App.js中完成了一個有按鍵的元件，並在index.js使用。

import React from 'react';
function App(props){
  return(
       <button> {props.name} </button> 
  );
}
export default App;

現在，我們試著來在index.js中，用夾在<App>標籤中的內容來設定<button></button>中間的文字。

1. 請把index.js中的<App/>改成<App></App>，並在兩個標籤中間加入文字。

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   import App from './App';
   import * as serviceWorker from './serviceWorker';
   
   ReactDOM.render(
       <div>
           <App> 在index.js中設定文字 </App>
       </div>,
       document.getElementById('root')
   );
   
   

2. 把App.js的render函式中button標籤內的文字移除。

   function App(props){
     return(
          <button>  </button> 
     );
   }
   

3. 在App.js函式中button標籤內使用children。因為children是props之一，所以使用方法為props.children。

   function App(props){
     return(
          <button> {props.children} </button> 
     );
   }
   export default App;
   
   

執行結果:

children會用來幹嘛?

自己覺得最常用到的地方是做固定的Layout(EX: nav列)
例如，這是我亂做的破產版FB導覽列:

import React from 'react';

const Layout=(props)=>{
    const navStyle={
        position:"fixed",
        top:"0",
        left:"0",
        width:"100%",
        height:"43px",
        backgroundColor:"rgb(66, 103, 178)",
        display:"flex",
        alignItems:"center"
    };
    const iconStyle={
        marginLeft:"10%",
        height:"25px",
        width:"25px",
        borderRadius:"1px",
        backgroundColor:"white"
    };
    const inputStyle={
        marginLeft:"5px",
        padding:"0px 7px",
        height:"25px",
        width:"28%",
        borderRadius:"2px",
        border:"none",
        backgroundImage:"url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png')",
        backgroundPosition:"97% 50%",
        backgroundSize:"auto 80%",
        backgroundRepeat:"no-repeat"
    };
    return(
      <div>
          <div className="nav-bar" style={navStyle}>
            <div  className="icon" style={iconStyle}>
                <img style={{height:"120%"}} src="https://www.logospng.com/images/48/facebook-logo-fb-sketched-sketch-icon-48978.png" alt="icon"/>
            </div>
            <input placeholder="搜尋" style={inputStyle}/>
          </div>
          <div className="index-container" style={{marginTop:"43px"}}>
              {props.children}
          </div>
      </div>
    );
}
export default Layout;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Layout from "./Layout";
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <div>
        <Layout>
            <App>在index.js中設定文字</App>
        </Layout>
    </div>,
    document.getElementById('root')
);
serviceWorker.unregister();

搭配後面會講的state或是react-router-dom去控制children的內容，就能做出最小更動畫面的效果。另外，在設計component時，也能用children把架構拆成兩層，做出相當彈性、直覺又實用的架構(例如: boostrap中的List & ListItem)

預告第21篇: children間的溝通

跟上一篇的最後一樣，我還是先提過一下children間的溝通方法，後面會再整理一次。
children之間或是children和包住children的元素溝通方法相當於在「同一父元件中兩個子元件的溝通」。假設今天我們今天在A元件中，使用了B元件，B元件中的children是C和D元件。那麼當B要傳東西給C時，我們就要把A當作溝通橋梁:

1. 用A的state來綁定C的props，在A中定義一個改變該state的函式
2. 把該函式綁在B上
3. 在B元件呼叫綁定在props上的A元件函式
4. A元件的函式修改了state
5. C元件的props就會被改變

C和D之間如果要溝通也是用同樣的方法，後面會有一篇詳細講一次。

小結

children的使用方法就講到這邊，接下來幾篇我們會先從class component開始，然後講state跟react hook的useState。

題外話:
自己以前在查鐵人賽文章的時候，不會30篇全看，而是只看自己需要的章節，所以才會把相關的東西都提一下。在安排主題順序的時候猶豫了很久，因為我希望把這系列的重心擺在讓新手step by step了解現代框架中對於元件的操作邏輯，所以步調放的很慢，我覺得自己可能是這次鐵人賽中講React的人裡面講最慢的吧哈哈。可是這樣就變成我每篇都在說這個會用到後面的東西，不知道這樣是不是件壞事就是了。