React组件

十万嬉_皮
1,188 阅读3分钟

注册组件

  1. const 注册组件：箭头函数
const AwesomeHeader = () => {
    return (
        <h1>用const注册组件</h1>
    )
}
  1. class 注册组件：从React.Component里继承
class AwesomeContent extends React.Component {
    // 需要在render方法里去return 咱们要渲染的内容
    render () {
        return (
            <div>使用语法糖注册组件</div>
            <Fragment>使用语法糖注册组件</Fragment>
        )
    }
}

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

组件的调用

ReactDOM.render(
    //调用时外层需包一个根元素，或者使用Fragment包裹
    <div className="app">
        //当组件里面没有内容是建议使用空元素，推荐使用自闭合
        <AwesomeHeader/>,
        <AwesomeContent/>
    </div>
)

关于JSX

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

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

组件嵌套

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

// react dom里提供了一个render方法，用于渲染JSX（javascriptxml）组件或者元素
ReactDOM.render(
    <div className="app">
        <AwesomeHeader>我想在这里显示内容，但是他不会出来<AwesomeHeader/>
    </div>
)

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

  1. class注册的组件：使用{this.props.children}来注册子组件
class AwesomeContent extends React.Component {
    console.log(this.props)
    render (){
        return (
            <div>
            {/* react里props.children是一种特殊的props，就表示一个组件的子元素 */}
            {/* 由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取 */}
                <h1>{this.props.children}</h1>
            </div>
        )
    }
}
  1. 箭头函数注册的组件：{props.children}
const AwesomeHeader = (props) => {
    console.log(props)
    cosnt headerText = 'awesome react'
    return (
        <h1>{headerText}-{props.children}</h1>
    )
}

组件传参

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

<AwesomeHeader
headerText="Hello World"
loginFn{()=>{
    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 (   
      <div>
        {/* react里props.children是一种特殊的props，就表示一个组件的子元素 */}
        {/* 由于咱们使用的是继承的方式来写组件，所以，这里得用this.props来获取 */}
        <h4>{this.props.children}</h4>
        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!
      </div>
    )
  }
}

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 (
      <Fragment>
        {/* App是父组件，在调用AwesomeHeader这个组件的时候，AwesomeHeader就是App的子组件， 所以想要传递参数，直接在子组件调用的地方写属性, 属性除了字符串以外，都要用{} */}
        {/* AwesomeHeader是一个函数式的组件，所以可以在内部通过props.属性名来访问 */}
        <AwesomeHeader
          headerText="Niubility React"
          logFn={() => {
            console.log('从app传过来的方法')
          }}
        />
         <AwesomeHeader
          headerText="Awesome means Niubility"
          logFn={() => {
            console.log('从app传过来的方法')
          }}
        />
        <AwesomeContent><div>awesome content 1</div></AwesomeContent>
      </Fragment>
    )
  }
}

再将App.js传入index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(
  <App />,
  document.querySelector('#app')
)
avatar
文章
阅读
粉丝