方法一
1 组件以函数形式创建 2 function Hello(){ 3 在一个组件中一定要return东西,如果不返回东西要return null,不能不写,会报错。 4 return null 5 } 6 ReactDOM.render(<div> 7 ppps 8 <Hello></Hello> 9 </div>,document.getElementById('app'))
组件传值
1 组件中传递数据(组件中传递的参数props都是只读的,不能重新负值。vue也是) 2 props 形参可以改,不过写props更有语义 3 function Hello(props){ 4 return <div>{props.name}</div> 5 } 6 const kakaxi{ 7 name: '旗木卡卡西' 8 age: '18', 9 can: '千鸟' 10 ReactDOM.render(<div> 11 ppps 12 <Hello name={kakaxi.name} age={kakaxi.age} can={kakaxi.can}></Hello> 13 </div>,document.getElementById('app'))
利用展开运算符传递
{...kakaxi}
将组件抽离出去
1 父组件 2 import Hello from './component/Hello.jsx' 3 ReactDOM.render( 4 <div> 5 123 6 <Hello {...kakaxi}></Hello> 7 </div> 8 ) 9 10 11 12 13 14 Hello.jsx 组件 15 import React from 'react' 16 //(1)创建即导出 17 export default function Hello(props){ 18 19 return <div>Hello的单独组件 </div> 20 } 21 22 //(2)先写函数再暴露 23 //export default Hello 24 25