Vue

React props

React props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
html

<div id="app"></div>


//js Babel 
/*props{
  name:'Lara',
  age:3,
}*/
//函式元件要大寫
function HelloMessage ( props ) {
    return(
    <div>
        <h1>我是 { props.name } !</h1>
        <p>我今年 { props.age } 歲</p>
     </div>
    ) 
}
const element = <HelloMessage name="Lara" age="3"/>;
const root = ReactDOM.createRoot(document.getElementById('root'));
//Rendar 只一次
root.render( element );


//return <div></div>包裹
//map() Key 綁定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Welcome (props){
  return <h1>{props.name},{props.age}</h1>
}


function App (){
  return (
    <div>
    <Welcome name="lara" age="2"></Welcome>
   <Welcome name="Tom" age="2"></Welcome>
    </div>
  )

}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);