React——组件

Posted 2020-10-07 QxQstar

一.创建组件

在React中有两种创建组件的方式，分别是函数形式的组件和类形式的组件

//函数形式：
 function Welcome(props){
   return <p>this is a page,{props.name}!</p>
 }
//类形式
 class Welcome extend React.Component{
  render(){
    return <p>this is a page,{{this.props.name}}!</p>
  }
}        

 在下面都是以函数形式的组件为例

在页面中显示自定义组件

const element = <Welcome name=‘li‘/>
ReactDOM.render(
  element,
  document.getElementById(‘root‘)
  );

 执行这段代码在页面中会显示：this is a page ，li!

解释上述代码：

   1.将<Welcome name=‘li‘/>作为ReactDOM.render()的第一个参数

 2.React将{name:‘li‘}作为props去调用Welcome组件

 3.Welcome组件返回<p>this is a page,li!</p>

　4.更新DOM

 

通常自定义的组件已大写字母开头，组件只能返回一个根节点

可以在一个组件中引入其他组件

组件不能修改它的props