React创建组件的两种方法

一function创建组件

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'
　　//在webpack.config

 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     

 在webpack.config.js的导出配置对象中，新增resolve节点。

  resolve:{

    extensions:['.js','.jsx','json']

  }

和mode，plugins，平级

可以使后缀名.jsx省略不写。

在项目zh

在项目中用@简写src下的根目录

只需在webpack.config.js下的resolve下新增alias(表示别名)

1  const path=require('path')
2  resolve:{4      alias:{
5        '@':path.join(__dirname,'./src')
6      }
7   }

二class关键字创建组件　

class 组件名称 extends React.component{
//在组件内部必须有render函数
    render(){
        //render函数中 必须返回合法的jsx
        //render函数的作用是渲染函数中的  dom元素     相当于class的实例组件
       return <div>创建的组件</div>
    }
}



ReactDom.render(
    <div>
       <组件名称></组件名称>
    </div>,document.getElementById('app')
)

//class 创建组件
import React from 'react'
import ReactDOM from 'react-dom'

import Hello from '@/components/Hello'
import '@/components/jic'
const kakaxi={
  name:"旗木卡卡西",
  age: '18',
  country:'日本'
}

class Movie extends React.Component{
  render(){
    return <div>这是一个movie组件</div>
  }
}
const mydiv=<div >
  <div>123</div>
  <Hello {...kakaxi}></Hello>
  <Movie></Movie>
  <hr/>
  <Movie></Movie>
</div>
ReactDOM.render(mydiv,document.getElementById('app'))

//组件传值props
import React from 'react'
import ReactDOM from 'react-dom'

import Hello from '@/components/Hello'
import '@/components/jic'
const kakaxi={
  name:"旗木卡卡西",
  age: '18',
  country:'日本'
}

class Movie extends React.Component{
  render(){
    //在class 关键字创建的组件中，如果想使用外界传递过来的props参数不需要接收，
    //直接this.props.xxx访问    
    return
    /* 注意：在class组件内 this表示当前组件的实例对象*/
     <div>这是一个movie组件  {this.props.name}---{this.props.age}</div>
  }
}
const mydiv=<div >
  <div>123</div>
  <Hello {...kakaxi}></Hello>
  <Movie {...kakaxi}></Movie>
  <hr/>
  <Movie name={kakaxi.name} age={kakaxi.age}></Movie>
</div>
ReactDOM.render(mydiv,document.getElementById('app'))

创建私有组件

import React from 'react'
import ReactDOM from 'react-dom'

import Hello from '@/components/Hello'
import '@/components/jic'
const kakaxi={
  name:"旗木卡卡西",
  age: '18',
  country:'日本'
}

class Movie extends React.Component{
  constructor(){
    super()
    this.state={
      msg:'这是一个私有数据',
      you:''
    }
  }
  render(){
    //在class 关键字创建的组件中，如果想使用外界传递过来的props参数不需要接收，
    //直接this.props.xxx访问
    this.state.you='切克闹'   //此时私有值可以更改
    /* 注意：在class组件内 this表示当前组件的实例对象*/
    return <div>
      这是一个movie组件  {this.props.name}---{this.props.age}
      <hr/>
        <p>{this.state.msg} ----{this.state.you}</p>
     </div>
  }
}
const mydiv=<div >
  <div>123</div>
  <Hello {...kakaxi}></Hello>
  <Movie {...kakaxi}></Movie>
  <hr/>
  <Movie name={kakaxi.name} age={kakaxi.age}></Movie>
</div>
ReactDOM.render(mydiv,document.getElementById('app'))