元件是封閉的 要接受外部資料應該通過props來實現

props的作用:接受傳遞給元件的資料

傳遞資料:給元件標籤新增屬性

接收資料:函式元件通過引數props接收資料 類元件通過this.props接受資料

函式元件

//匯入react
import React from 'react'
import ReactDOM from 'react-dom'
 
//匯入元件
// 約定1：類元件必須以大寫字母開頭
// 約定2:類元件應該繼承react.component父類 從中可以使用父類的方法和屬性
// 約定3:元件必須提供render方法
// 約定4:render方法必須有返回值
 
//函式元件
const HelloWorld=props=>{
    console.log(props)
    return (
        <div>
            <h1>props:{props.name}</h1>
        </div>
    )
}
    
 
ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))
類元件

//匯入react
import React from 'react'
import ReactDOM from 'react-dom'
 
//匯入元件
// 約定1：類元件必須以大寫字母開頭
// 約定2:類元件應該繼承react.component父類 從中可以使用父類的方法和屬性
// 約定3:元件必須提供render方法
// 約定4:render方法必須有返回值
 
class HelloWorld extends React.Component{
    render(){
        console.log(this.props)
        return (
            <div>
                <h1>props:{this.props.name}</h1>
            </div>
        )
    }
}
//函式元件
// const HelloWorld = (props) => {
//     console.log(props)
//     return (
//         <div>
//             <h1>props:{props.name}</h1>
//         </div>
//     )
// }
 
ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))