react ref 的使用和 react传送门 Portal 作用以及使用

/* * @Description: ref 的场景和 传送门 Portal 作用以及使用 * @Version: 2.0 * @Autor: lhl * @Date: 2020-06-01 10:20:33 * @LastEditors: lhl * @LastEditTime: 2020-06-02 14:07:17 */ import React, { Component, useRef } from 'react' import ReactDOM from 'react-dom' export default class App extends Component { render() { return ( <div>
        <p>hello react</p>
        <FunRef abc="111"></FunRef>
        <RefClassComponent></RefClassComponent>
        <CbRef></CbRef>
        <Dialog></Dialog>
      </div> ) } } // 默认情况下，你不能在函数组件上使用 ref 属性，因为它们没有实例 // 但是特别的，你可以在函数组件内部使用 ref 属性，只要它指向一个 DOM 元素或 class 组件 // 如果要在函数组件中使用 ref，你可以使用 forwardRef 或者可以将该组件转化为 class 组件 function FunRef(props) { console.log(props) // {abc: "111"} // 这里必须声明 textInput，这样 ref 才可以引用它 const textInput = useRef(null); function handleClick() { textInput.current.focus(); } return ( <div>
      <input type="text" ref={textInput} />
      <input type="button" value="聚焦" onClick={handleClick} />
    </div> ); } // class 组件中ref的使用 如果你目前还在使用 this.refs.xx 这种方式访问 refs ，现在建议用回调函数或 createRef API 的方式代替 class RefClassComponent extends Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } } // 回调函数的方式 访问 refs React.forwardRef 接受一个渲染函数，其接收 props 和 ref 参数并返回一个 React 节点 class CbRef extends Component { render() { return ( <FunRef inputRef={el => this.inputElement = el} /> ); } } // createPortal 传送门的使用 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 class Dialog extends React.Component { constructor(props) { super(props); this.el = document.createElement('div'); this.el.setAttribute('class', 'dailog-box'); } componentDidMount() { document.body.appendChild(this.el); } componentWillUnmount() { document.body.removeChild(this.el); } render() { return ReactDOM.createPortal(( <div className="dailog-content"> 弹窗内容 </div> ), this.el); } }