一般使用component元件時會使用的方法是<component(名稱)></component(名稱)>或是
<components(名稱) />

<component(名稱)></component(名稱)>
或
<components(名稱) />

在 props當中皆存在一個children的屬性，childern存在於各元素包覆的中間
例如：

<div>
中間則是children
</div>

我們要如何使用props來操作children屬性

children是props屬性，所以當children改變時，畫面顯示也會一起被更改

新建立一個Card components

import React from "react"
import "./card.css"

const Card = () => {
  return <div><p>魔法小卡</p></div>
}

export default Card

將元件放入App.js做使用

import React from "react"
import Card from './Card';

const App = () => {
        return (
            <Card>
                <p>魔法小卡</p>
            </Card>
        );
}

export default App;

在Card component中的<div>標籤內使用children;因為children是props屬性之一，因此使用上的語法為props.children

import React from "react"
import "./card.css"

const Card = (props) => {
    return (
        <div>
            {props.children}
        </div>
    );
}
export default Card;

最後呈現出來的結果：

以上是今天練習props的children屬性使用方法，如果文章內容有錯誤的部分，歡迎大大們給予指教