学习React[六]

最新推荐文章于 2024-09-20 07:59:56 发布

又菜又爱玩__QAQ

最新推荐文章于 2024-09-20 07:59:56 发布

阅读量364

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_60505953/article/details/122177575

版权

组件内容补充

1.ref函数式组件使用

import React, { createRef, forwardRef, PureComponent } from 'react'

export default class App extends PureComponent {

  constructor(props) {
    super(props);
    // 本身的使用 ref
    this.titleRef = createRef();

    // 函数式组件使用 ref
    this.profileRef = createRef();


    // 类组件使用 ref
    this.homeRef = createRe*();
  }

  render() {
    return (
      <div>

        app: {this.props.name}

        <h2 ref={this.titleRef}>Hello World</h2>


        <Profile ref={this.profileRef} />


        <Home ref={this.homeRef} />

        <button onClick={e => this.changeRef()}>改变</button>

      </div>
    )
  }

  changeRef() {
    // 本身的
    console.log(this.titleRef.current);
    this.titleRef.current.innerHTML = 'Hello React';

    // 函数式组件
    console.log(this.profileRef.current);
    this.profileRef.current.innerHTML = '使用ref改变了函数式组件';

    // 类组件
    console.log(this.homeRef.current);
  }
}

// 函数式组件 使用高阶组件 forwardRef()来使用Ref
const Profile = forwardRef(function (props, ref) {
  return <h2 ref={ref}>profile</h2>
})


// 类组件
class Home extends PureComponent {
  render() {
    return <h2>home</h2>
  }
}

2.portals的使用

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom';

// 使用portals

// 第一步 在index.html 中添加一个根节点

// 第二步 导入 import ReactDOM from 'react-dom';

// 第三步 创建一个把节点放到index.html 中的根节点 使用到portals


// 创建Modal 可以把组件里面的孩子放到index.html中的一个根节点
class Modal extends PureComponent {
  render() {
    return ReactDOM.createPortal(this.props.children,document.getElementById('modal'))
  }
}

// 创建一个Home类组件
class Home extends PureComponent {
  render() {
    return (
       <div>
        <h2>Home</h2>

        <Modal>
          <h2>你好啊，czm (在modal的根节点上)</h2>
        </Modal>
      </div>
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home/>

        <Modal>
         <div>
            <h2>你好啊，React (在modal的根节点上)</h2>
          </div>
        </Modal>
      </div>
    )
  }
}

3.fragments使用

import React, { Fragment, PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props); 
    this.state = {
      counter: 0,

      friends: [
        {name:'czm', age:18},
        {name:'clm', age:18},
      ]
    }
  }

  render() {
    return (
      // <Fragment>
      //   <h2>计数: {this.state.counter}</h2>
      //   <button onClick={e => this.increment()}>+1</button>
      // </Fragment>

      // 短语法<>不能添加属性  <Fragment>可以添加属性 key常见
      <>
        <h2>计数: {this.state.counter}</h2>

        <button onClick={e => this.increment()}>+1</button>

        <div>

          {
            this.state.friends.map((item, index) => {
              return (

                <Fragment key={item.name}>

                  <span>{item.name} </span>

                  <span>{item.age}</span>

                  <hr/>

                </Fragment>
              )
            })
          }
        </div>
      </>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}