React组件-白红宇

注册组件

const 注册组件：箭头函数

const AwesomeHeader = () => {    return (        用const注册组件
    )}复制代码

class 注册组件：从React.Component里继承

class AwesomeContent extends React.Component {    // 需要在render方法里去return 咱们要渲染的内容    render () {        return (            
    
     使用语法糖注册组件
    
            
    
     使用语法糖注册组件
            )    }}复制代码

注意点： 组件每个单词首字母必须大写； Fragment是react 16之后新增的组件，用它包裹就不会产生多余的DOM元素； return里面是JSX，外层必须有根元素包裹；

组件的调用

ReactDOM.render(    //调用时外层需包一个根元素，或者使用Fragment包裹    
    
             //当组件里面没有内容是建议使用空元素，推荐使用自闭合        
     ,        
         
    
)复制代码

关于JSX

在render方法中的return内部是JSX，所以在JSX里面如果想写JS的代码，必须加上 “{}”

{/*如果想在return中写注释或者其他JS代码，必须在外层加上 “{}” */}复制代码

组件嵌套

如果你想在组件中插入其他内容，这时就需要组件嵌套，不然插入的内容将无法显示

// react dom里提供了一个render方法，用于渲染JSX（javascriptxml）组件或者元素ReactDOM.render(    
            
     
      我想在这里显示内容，但是他不会出来
          
     
    
)复制代码

react的特殊props，表示组件的子元素，由于使用继承的方式注册组件，可用this.props来获取

class注册的组件：使用{this.props.children}来注册子组件

class AwesomeContent extends React.Component {    console.log(this.props)    render (){        return (            
    
                 {/* react里props.children是一种特殊的props，就表示一个组件的子元素 */}            {/* 由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取 */}                
     {this.props.children}
            
    
        )    }}复制代码

箭头函数注册的组件：{props.children}

const AwesomeHeader = (props) => {    console.log(props)    cosnt headerText = 'awesome react'    return (        {headerText}-{props.children}
    )}复制代码

组件传参

父组件调用子组件，如果想在子组件里面传参，可直接在父组件调用子组件的地方写上属性，属性除了字符串都要加上 “{}” ，子组件可通过 “props.属性名” 来访问


    
     {    console.log('方法')}}/>复制代码

AwesomeHeader是一个函数式的组件，所以可以在内部通过props.属性名来访问

工程化思想

一般会在src文件夹中新建一个components专门放组件的js文件，类似这样，快捷键：rcc

//首先引入React和他的Component方法import React, { Component } from 'react'//再将class定义的这一整段组件export出去export default class AwesomeContent extends Component {  render() {    console.log(this.props)    return (         
    
             {/* react里props.children是一种特殊的props，就表示一个组件的子元素 */}        {/* 由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取 */}        
     {this.props.children}
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur temporibus libero minima dolorem, rerum nulla similique reprehenderit est et reiciendis possimus delectus atque sint velit quas, laboriosam repellat quos ratione!      
    
    )  }}复制代码

components里面还有一个index.js专门管理组件

//第一种引入方式import AwesomeHeader from './AwesomeHeader'import AwesomeContent from './AwesomeContent'export {   AwesomeHeader,   AwesomeContent}//第二种引入方式export { default as AwesomeHeader } from './AwesomeHeader'export { default as AwesomeContent } from './AwesomeContent'复制代码

接着src中新建一个App.js，在这里面统一import组件

//首先引入React和他的Component方法import React, { Component, Fragment } from 'react';//同意引入组件import {  AwesomeHeader,  AwesomeContent} from './components'//并导出App父组件export default class App extends Component {  render() {    return (      
    
             {/* App是父组件，在调用AwesomeHeader这个组件的时候，AwesomeHeader就是App的子组件， 所以想要传递参数，直接在子组件调用的地方写属性, 属性除了字符串以外，都要用{} */}        {/* AwesomeHeader是一个函数式的组件，所以可以在内部通过props.属性名来访问 */}        
     
       {            console.log('从app传过来的方法')          }}        />         
      
        {            console.log('从app传过来的方法')          }}        />        
       
        
         awesome content 1
        
             
      
     
        )  }}复制代码

再将App.js传入index.js

import React from 'react';import ReactDOM from 'react-dom';import App from './App'ReactDOM.render(  
    ,  document.querySelector('#app'))复制代码