React函数式组件和类组件及符合组件

函数式组件类组件复合组件页面效果

函数式组件

一般用于静态、没有交互事件内容的组件页面 函数式组件传参写法 // An highlighted block //函数式组件 function Childcom(props){ let title = <h2>我是副标题</h2> console.log(props) let weather = props.weather //条件判断 let isGo = weather=="下雨"?"不出门":"出门" return( <div> <h1>函数式组件helloworld</h1> {title} <div> 是否出门? <span>{isGo}</span> </div> </div> ) } react视图渲染 ReactDOM.render( <Childcom weather="不下雨"/>, //document.getElementById('root') document.querySelector('#root') )

类组件

一般又称为动态组件，那么一般会有交互或者数据修改的操作 类组件定义 //类组件定义 class HelloWorld extends React.Component{ render(){ return( <div> <h1>类组件定义helloworld</h1> </div> ) } } react视图渲染 ReactDOM.render( <HelloWorld abc="哈哈"/>, //document.getElementById('root') document.querySelector('#root') )

复合组件

组件中又有其它的组件，复合组件中既可以有类组件又可以有函数组件 类组件嵌套函数式组件 //复合组件 class HelloWorld extends React.Component{ render(){ console.log(this) return( <div> <h1>类组件定义helloworld</h1> <h2>hello:{this.props.abc}</h2> <Childcom/> </div> ) } } -react视图渲染 ReactDOM.render( <HelloWorld abc="哈哈"/>, //document.getElementById('root') document.querySelector('#root') )

页面效果